[Resolved] Toolset Product Page Customization

[Author]

Posts

[cameronC-2]

Hey,

Just wondering if it's possible to customize the single product page without creating a brand new template? I tried creating a template already and it just doesn't look as nice as it does with the regular theme design. My main issue was with the Add To Cart block, the plus or minus on the quantity field was missing when I used the Botiga theme (free version). I forced the block to use WooCommerce Native Output instead of Toolset Custom Output which made the Add To Cart use the Botiga theme design which was nice but unfortunately that messed up the positioning of the Add To Cart button and quantity field. Sadly, I have no images as I had to restore a backup as Toolset broke the single product pages but if you download the free Botiga theme and use the Add To Cart block in a single product page you should be able to replicate the issue.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've performed some tests on my website with the Botiga theme (free version) and noticed that its styles for the 'add-to-cart' section are dependent on a container with a class "product-gallery-summary".

When this section is used inside a Toolset content template, this container is missing and so not all theme styles are applied, as they should.

To overcome this, you can follow these steps:

1. In your Toolset content template for the single products, you can first include a "Container" block and inside this block, insert the "Add to Cart Button" block.

2. In the "Add to Cart Button" block, please make sure to select the "WooCommerce Native Output" option.

3. In the new "Container" block's "CSS Classes" field, include the class "product-gallery-summary".
( example screenshot: container-custom-class-png )

As a result, when you'll see this add-to-cart section on the front-end, it will show with the same theme styles, as without the Toolset content template.
( example screenshot: example-before-after-png )

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[cameronC-2]

It fixed the add to cart button but for some reason that makes the product image too small and far away from the button. I've changed the column sizes and that doesn't solve it either.

[cameronC-2]

Image attached

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

Can you please share the link to an example product page from your website, where these images can be seen?

I'll be in a better position to guide you with the next steps, accordingly.

[cameronC-2]

I managed to get it working, looks out of place on the backend but on the front end it looks fine. Also, the attribute list block looks great for product specifications, is it possible to add custom fields to that list or replace them with Toolsets custom fields entirely?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update and glad that you managed to get it working.

The "List Attributes" block is designed to show the attribute (taxonomy terms) managed by WooCommerce. It can't be used to show the custom fields.

You can insert a custom table HTML and Toolset custom field shortcodes ( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/ ) in a "Fields and Text" block, to construct a similar table that shows custom fields data.

For example:

<table class="wooviews-list-attributes">
	<tbody>
		<tr class="wooviews-list-attributes-item">
			<th class="wooviews-list-attributes-item__label">Field 1 Name</th>
			<td class="woocommerce-product-attributes-item__value wooviews-list-attributes-item__value"><p>[types field="field-1-slug"][/types]</p></td>
		</tr>
		<tr class="wooviews-list-attributes-item">
			<th class="wooviews-list-attributes-item__label">Field 2 Name</th>
			<td class="woocommerce-product-attributes-item__value wooviews-list-attributes-item__value"><p>[types field="field-2-slug"][/types]</p></td>
		</tr>
	</tbody>
</table>

[cameronC-2]

I really appreciate your help Waqar. Still need some assistance though if you don't mind.

The great thing about the attribute block is it only draws the attributes that exist. I managed to make a table with the help of your code, however the field name will always show even if nothing exists in the types field. For example, if I removed the attribute Brand from the product itself, it won't show in the attribute table but if I use that code it will always show the 'attribute' name and table. Any thoughts on how I can solve this?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

You can use some custom script, to hide the row from the table where the custom field value is empty.

For example, suppose you have three fields with slugs "field-1", "field-2", and "field-3", to show in a table.

The HTML for the table will look like this:

<table class="wooviews-list-attributes">
    <tbody>
        <tr class="wooviews-list-attributes-item">
            <th class="wooviews-list-attributes-item__label">Field 1</th>
            <td class="woocommerce-product-attributes-item__value wooviews-list-attributes-item__value">[types field="field-1"][/types]</td>
        </tr>
        <tr class="wooviews-list-attributes-item">
            <th class="wooviews-list-attributes-item__label">Field 2</th>
            <td class="woocommerce-product-attributes-item__value wooviews-list-attributes-item__value">[types field="field-2"][/types]</td>
        </tr>
        <tr class="wooviews-list-attributes-item">
            <th class="wooviews-list-attributes-item__label">Field 3</th>
            <td class="woocommerce-product-attributes-item__value wooviews-list-attributes-item__value">[types field="field-3"][/types]</td>
        </tr>
    </tbody>
</table>

And in the product page template's "JS Editor" you can include the following script to hide any row with an empty field:

jQuery(document).ready(function(){
    jQuery('tr.wooviews-list-attributes-item').each(function(){
        var val= jQuery(this).find('td.woocommerce-product-attributes-item__value ').html();
        if(!val) {
            jQuery(this).hide();
        }
    });
});

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[cameronC-2]

That jQuery works well, thank you. I decided instead of creating a whole new product page template, I would just add the table underneath the product description on my theme but I'm running into another problem. The types fields don't show unless it's made in a toolset template. The table works perfectly when created in a Toolset template but when added directly to my theme this is what I get. Image attached.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update.

If you're adding the table HTML in the PHP template file of the theme, you'll call each Type's field shortcode, inside the "do_shortcode" function:
https://developer.wordpress.org/reference/functions/do_shortcode/

For example, the shortcode:

[types field="field-1"][/types]

Will become:

<?php echo do_shortcode( '[types field="field-1"][/types]' ); ?>

[cameronC-2]

My issue is resolved now. Thanks a lot for the help Waqar!