Using WooCommerce with XPro, can the product attributes/variations and filter options be displayed in columns?

Support
#1

Hi, I’m working on a WooCommerce site using your XPro and I haven’t got much experience with WooCommerce or your Pro theme (I usually just stick to your X Theme). It’s a site that mainly sells radiators, and there’s many width options available.

  1. I’ve used WOOF by Category plugin to filter the sizes for the radiators. The problem with this is there’s a very long list of them and wondered if there was any CSS which would put them into columns?
    https://www.myhomeware.co.uk/product-category/white-towel-radiators/

  2. Also, on some of the product pages, there is a list of radiator sizes to choose from (using attributes and variations). Is there any CSS which would put them into columns?
    https://www.myhomeware.co.uk/all-products/radiator-boosters/for-single-panel-radiators-my-homeware-radiator-booster-heat-diverter-fit-forget/

I’d be very grateful of any help!

Thanks!

#2

Hello @core365,

Thanks for writing in!

Do you want to display them something like this:

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce div.product .summary .variations .value {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: center;
    align-content: center;
}

.woocommerce div.product .summary .variations .value > div{
    padding: 4px 10px;
}

Please let us know if this works out for you.

#3

Hi, thanks for that! For the product filter that goes down the left hand side of the page, the filter options are displaying in 3 columns, but the columns don’t line up with the rows below. Is there a way of getting them to line up as on the screen grab attached?

Also, as an option, is it doable to have them displayed in 2 columns instead of 3?

I’ve also noticed that the category title isn’t showing at the top of the page and I’ve looked at the settings and can’t see where to enable anything for it to be displayed at the top of the page!

https://www.myhomeware.co.uk/product-category/black-towel-radiators/

Thanks!

#4

Hey @core365,

Try adding this code sample.

.woof_list.woof_list_checkbox {
    display: flex;
    flex-wrap: wrap;
}

.woof_list.woof_list_checkbox li {
    flex: 1 1 40%
}

This would be the result.

Please just note that the part is coming from a third-party plugin. It’s best that you contact the plugin developer if it has options to handle that layout.

Also, we will not provide support for customizations. If issues arise from that code, please forward it to other web developers.

Hope that helps and thank you for understanding.

#5

Hi, that’s just how I wanted it, thank you!

I’ve also noticed that the category title isn’t showing at the top of the page and I’ve looked at the settings and can’t see where to enable anything for it to be displayed at the top of the page!

https://www.myhomeware.co.uk/product-category/black-towel-radiators/

Thanks!

#6

Hi @core365,

In renew stack, the titles are part of the landmark. And there is no landmark on Pro headers since everything in it should be manually created by users.

Please check this https://theme.co/apex/forum/t/landmark-header-in-pro/16384/10 if you wish to create landmarks, or just use dynamic content for the simple title.

Thanks!

#7

Hi, I’ve had a look at the link you supplied and I don’t understand what I’m supposed to do with the shortcode! They are categories, not pages, so I don’t know where I’m supposed to put the shortcode so it displays the title on the category pages, unless I’ve misunderstood something?

I’ve looked at the screen grabs you supplied, but I have no idea where I’m supposed to put the headline from the screen grabs you supplied, as it needs to appear on the page itself above the content, not in the header area.

Isn’t there any script to add to the functions.php file to display the titles on the product category pages?

Thanks

#8

Hi @core365,

The code in that link should be added on the child theme’s functions.php as suggested on that thread. And it’s landmark so it should cover all titles for the post, pages, archive, and so on. But please ignore that, instead add this code to child theme’s functions.php

add_shortcode ('product_cat_title', 'product_cat_title');

function product_cat_title ($atts, $content) {

return single_term_title("", false);

}

Then simply add [product_cat_title] to your category description.

It can’t be added automatically since there is no proper hook for term_description(). And it has to be added there since you wish it to be part of the content which is the description.

Thanks!

#9

Hi, that’s great, thank you!

There’s only just one other thing if that’s ok! I’ve tried to style the title with CSS, but it changes the description that appears under the title too. I’ve tried it with using product_cat_title and then the CSS styling, but it does nothing. Is there any way of me being able to style the title with CSS?

Thanks!

#10

Hey @core365,

To style the title, you can make use of the following code:

.product_title {
    font-size: 22px;
    margin-bottom: 18px;
    line-height: 30px;
    color: #7da19c;
    font-weight: 500 !important;
}

You can adjust the values as per your need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#11

Hi, thanks for that, but I needed the CSS for the category title, not the product title! I’ve tried to look for the CSS ID/Class for the category title, but I can’t find it!

https://www.myhomeware.co.uk/product-category/black-towel-radiators/

Thanks!

#12

Hi @core365,

You need to wrap that headline with it own tag

e.g.

<h3 class="my-class">Black Towel Radiators</h3>

Currently, it’s not wrapped on its own and is one with the entire description, if we style that now it will style the entire description as well.

Thanks,

#13

Hi, thanks, but where do I add the tag, as I’ve added [product_cat_title] to each category description and so I’ve tried to add the tag to the ‘Name’ on the Products > Categories but it doesn’t keep it after updating.

Hope that makes sense!

Thanks!

#14

Hello @core365,

Please update your product category title by using this code instead:

<h3 class="my-class mbm">[product_cat_title] </h3>

We would love to know if this has worked for you. Thank you.

#15

Hi, unfortunately it didn’t work! I put it in the Description box on the Category, but after clicking ‘update’, the code disappears and reverts back to what it was before with just [product_cat_title]

Thanks

#16

Hi @core365,

The provided code is a generic one and its customization is up to you. Example,

add_shortcode ('product_cat_title', 'product_cat_title');

function product_cat_title ($atts, $content) {

return '<h3 class="my-class mbm">'.single_term_title("", false).'</h3>';

}

This means, your title will be autogenerated through the shortcode without coding it for each category description. Then the CSS would be similar to the top

h3.my-class {
    font-size: 22px;
    margin-bottom: 18px;
    line-height: 30px;
    color: #7da19c;
    font-weight: 500 !important;
}

Though, if you would need to add the title with HTML code within the category description then you can ignore all the shortcode related implementation. And just add the title itself without a need for further codings, such as this

<h3 class="my-class">Black Towel Radiators</h3>

Thanks!

#17

Ah, ok, thank you for explaining it! It’s worked!

Thanks again, it’s much appreciated!

#18

You’re welcome!
We’re glad we were able to help you out.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.