[Resolved] Split: Different templates being used for Products

[Author]

Posts

[GinaM9227]

Update: I figured out how to see what the WP Products Template I created looks like and have added some Custom Fields. However I selected a custom layout with 3 columns and 3 rows but instead I have one long and uneven list. See attached 2 screens showing the long list with uneven margin on the left.

Once the template is finished, I dont know how to apply the Products template to the areas that I want. For example, the default Woocommerce template is still being used.

[Waqar]

Hi Gina,

Glad that you're making progress.

As mentioned in the reply to the original ticket ( https://toolset.com/forums/topic/different-templates-being-used-for-products/#post-1173003 ), the admin area access details that you shared earlier, no longer seem to be accepted.

I'll need to log in to the admin area to see how the archives and WooCommerce are set up currently, to suggest the next steps.

You're welcome to share the updated access details in reply to the original ticket, and just let me know on this ticket, that they've been shared.

regards,
Waqar

[GinaM9227]

Hello Waqar,

I thought I had responded to you in another thread. My WP admin login:
Username: ginamok@gmail.com
Password: Cupcake007$

My FTP Login details are hidden link
Username: ginamok@gmail.com
Password: Cupcake007$

On a related question, there is a Tools View called Events Grid - this is similar to the Woocommerce Products Template that I created.

For the Events Grid Views, is there a code to fix the appearance of the product images? Right now they are all different sizes. I thought the layout would be formatted it automatically.

Thank you

[Waqar]

Hi Gina,

Thanks for writing back and for sharing the access details.

I've checked your web site's "Products" view ( hidden link ) and noticed that there were some extra closing </div> tags in the "Template" section:

Old code:
( screenshot: hidden link )

<div class="products">
<a href="[wpv-post-url]" target="_blank">[wpv-post-featured-image]</div>
<h3><a href="[wpv-post-url]" target="_blank">[wpv-post-title]</a></h3>   
      by [wpv-post-taxonomy type="yith_shop_vendor"]      

      <div class="event-date-box">    
        <div class="event-date-start">      
          [display_formatted_date field="[wpv-post-field name='_start_date_picker']" format='D, M j']
          [wpv-conditional if="( $(_start_date_picker) ne $(_end_date_picker) )"], [display_formatted_date field="[wpv-post-field name='_start_time_picker']" format='g:i a'][/wpv-conditional]
          [wpv-conditional if="( $(_start_date_picker) eq $(_end_date_picker) )"]<br>[display_formatted_date field="[wpv-post-field name='_start_time_picker']" format='g:i a'] - [display_formatted_date field="[wpv-post-field name='_end_time_picker']" format='g:i a'][/wpv-conditional]
        </div>
        [wpv-conditional if="( $(_start_date_picker) ne $(_end_date_picker) )"]
        <div class="event-date-end">[display_formatted_date field="[wpv-post-field name='_end_date_picker']" format='D, M j'], [display_formatted_date field="[wpv-post-field name='_end_time_picker']" format='g:i a']</div>
        [/wpv-conditional]
      </div>
      <div>[wpv-woo-product-price]</div>
    </div>
</div>

I've removed those extra closing div tags and the layout is now fixed.

New code:
( screenshot: hidden link )

<div class="products">
  <div><a href="[wpv-post-url]" target="_blank">[wpv-post-featured-image]</div>
  <h3><a href="[wpv-post-url]" target="_blank">[wpv-post-title]</a></h3>   
  by [wpv-post-taxonomy type="yith_shop_vendor"]      

  <div class="event-date-box">    
    <div class="event-date-start">      
      [display_formatted_date field="[wpv-post-field name='_start_date_picker']" format='D, M j']
      [wpv-conditional if="( $(_start_date_picker) ne $(_end_date_picker) )"], [display_formatted_date field="[wpv-post-field name='_start_time_picker']" format='g:i a'][/wpv-conditional]
      [wpv-conditional if="( $(_start_date_picker) eq $(_end_date_picker) )"]<br>[display_formatted_date field="[wpv-post-field name='_start_time_picker']" format='g:i a'] - [display_formatted_date field="[wpv-post-field name='_end_time_picker']" format='g:i a'][/wpv-conditional]
    </div>
    [wpv-conditional if="( $(_start_date_picker) ne $(_end_date_picker) )"]
      <div class="event-date-end">[display_formatted_date field="[wpv-post-field name='_end_date_picker']" format='D, M j'], [display_formatted_date field="[wpv-post-field name='_end_time_picker']" format='g:i a']</div>
    [/wpv-conditional]
  </div>
  <div>[wpv-woo-product-price]</div>
</div>

As for the images in the "Events Grid" view, I used the search form at the page with that view ( hidden link ) and noticed that the images were now showing in a uniform size.
( screenshot: hidden link )

Looks like you've managed to fix this after writing to us. In case the issue still persists, please share a link to the specific page where those images can be seen, in a new ticket.

I hope this helps.

regards & Happy New Year,
Waqar

[GinaM9227]

That is great that you fixed the layout for the Products Archive.
I would like to know how do I apply this layout I created to replace the default Woocommerce shop page?

There are a few formatting issues that I'd like to know how to fix - See attached screenshots to see what I'm talking about. For example:
- the size of the pictures is a bit small and I'd like to resize to make them bigger or to change the length and width so they are more rectangular - how to do that?
- The gap between the columns of each product is very wide - how do I make the column gap more narrow?
- There is a lot of space between the Post Title and the line below - how do I reduce the gap
- There is not enough space in the rows between products - how do I increase it?

About the Events Grid View, the images are only uniform on the width on top but if you look at the height, they are all different sizes - see attached screenshot. So the default code only resizes the width but not the height. Is there a way to fix the height as well so they are all uniform? This formatting question is related to the one above so hopefully your answer will solve both issues.

Thank you

[Waqar]

Hi Gina,

Thanks for the update.

> I would like to know how do I apply this layout I created to replace the default Woocommerce shop page?

- By default, the WooCommerce's product archive page is accessible at:
hidden link

The custom "Products" view that you have created is already assigned to it. If you'll create a new shop page and set it as a "
Shop page" ( from WP Admin -> WooCommerce -> Settings -> Products ), this view will automatically be assigned to that shop page as well.

We have more details on the topic at the following guide:
https://toolset.com/learn/create-an-ecommerce-wordpress-site/designing-woocommerce-product-catalog/

To make sure this same view/layout is also applied to other product archive pages, please open the view "Products" for editing ( hidden link ) and also select the options for "Product categories" and "Product tags".
( screenshot: hidden link )

> the size of the pictures is a bit small and I'd like to resize to make them bigger or to change the length and width so they are more rectangular - how to do that?

- If you'll check the content template of that "Products" view, you'll find that the image is being shown using the "wpv-post-featured-image" shortcode ( screenshot: hidden link ).

You'll find the information about the available attribute of this shortcode at:
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-153425

You can adjust the dimension of this default "Thumbnail size", from WP Admin -> Settings -> Media.

> The gap between the columns of each product is very wide - how do I make the column gap more narrow?
> There is a lot of space between the Post Title and the line below - how do I reduce the gap
> There is not enough space in the rows between products - how do I increase it?

- To adjust the design elements like widths, paddings, and margins, custom CSS code will be needed.

As much as we would like to help, 1-1 customization assistance is beyond the scope of support that we provide. You can read the details about what is covered, in our support policy at:
https://toolset.com/toolset-support-policy/

We do our best to guide in the right direction though and to find the right elements to target through custom CSS code, you'll find Chrome's DevTools most useful:
hidden link

You'll also find a number of articles in our documentation section related to working with custom CSS:

https://toolset.com/documentation/user-guides/adding-custom-css-views/
https://toolset.com/documentation/beyond-the-basics/leverage-existing-styles-and-add-new-css/
https://toolset.com/faq/learning-basic-html-and-css/

For someone who is not comfortable working with HTML and CSS, our recommendation is to hire a professional from our recommended contractors:
https://toolset.com/contractors/

For questions and concerns related to Toolset plugin functionalities, you're welcome to write to us, anytime.

I hope this helps.

regards,
Waqar