[Resolved] Subtitle under Woo Product Category

[Bob]

Hi guys,
This might not be your domain and may be one for Woo Commerce or maybe even Wp Bakery, so forgive me if I am asking the wrong team. The reason I ask is because I think this might be something that can be done with your Elements.
I want to add a small Subtitle or short description under the Category titles shown at the bottom of my home page.
As you will see, I have used WPBakery Page Builder and its element ‘Product Categories’ to display the Woo Categories. This works OK, but there is no Subtitle or Short description. To be honest, I wouldn’t mind making the image more rectangular either, but that might be pushing my luck.
Anyway, I guess what I want to know, is can I do this using the Generate Press Element instead of the WP Bakery Element or is there a code I can add to my Child Theme to make this happen?

Thanks in advance.

[David]

Hi there,

if in Customizer > Layout > Woocommerce –> Shop you have the Short Description to display then the category list will display the Category description – it will however also display it for all the products.

If you want to use Elements to call in your own custom field then you can select Custom Hook and use this Woo hook:

woocommerce_after_subcategory_title

[Bob]

Hey David,
I don’t seem to have the Customizer > Layout > Woocommerce –> Shop thing happening. There is no option for Woocommerce under ‘Layout’ and no Hop under Woocommerce menu?

[David]

in Dashboard > Appearance > GeneratePress – make sure you have the Woocommerce module enabled

https://docs.generatepress.com/article/woocommerce-overview/

[Bob]

Hey guys,
Sorry about this. I have just noticed that when I turn on the WooCommerce Element, a Cart appears at the end of the navigation menu. I do not want a cart.

Also, it changes the look of my Description / Specifications / Load Capacity tabs on my product pages. I used the ‘Yikes Custom Product Tabs for Woocommerce’ plugin to add these tabs, but activating the Woocomerce Element seems to interfere with the layout and looks really ugly. How can I prevent this from happening or make the tabs look nicer when Woocommerce Element is active? When active the tabs go transparent and the text is blue. When not active the tabs are slightly bigger with Black text and grey background.
Example page: https://www.bosstorage.com.au/product/long-span-shelving/

[David]

You can disable the Cart in Menu in Customizer > Layout > Woocommerce:

https://docs.generatepress.com/article/woocommerce-overview/

What do the tabs look like when the GP Woo module is disabled ?

[Bob]

So when the element is active, the text in the tabs is blue. When Element is inactive the text is Black and tabs are slightly larger. I would prefer the text be Black or even Green, but not Blue. There are some other subtle differences such as the general shape and shading of the Grey but it would be easier if I could show you.
I’ve turned the element off for now, so that you can see how they look.
If its easier I can send you a couple of screenshots, if you can advise how to send them to you.
https://www.bosstorage.com.au/product/long-span-shelving/

Cheers

[David]

Screenshots – simply host the image in your Media Library or cloud share and send us a link.

[Bob]

Deactivated Element (As it should look)
https://www.bosstorage.com.au/wp-content/uploads/2020/05/Screen-Shot-Deactivated-Element.png

Woocommerce Element Active (Not how it should look)

https://www.bosstorage.com.au/wp-content/uploads/2020/05/Screen-Shot-Activated-Element-.png

[David]

In Customizer > Colors > Woocommerce –> Product Tabs you can edit the text color.

Then this CSS:

/* Add Border below tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: 1px solid #d3ced2 !important;
}

/* Change inactive tab background color */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: #ebe9eb;
}

/* Offset tabs to right hand side tab */
@media(min-width: 769px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs li:first-child {
        margin-left: 5px;
    }
}

[Bob]

That’s fantastic David, thanks so much.

[David]

You’re welcome

[Author]

Posts