Return to previous page

Configuring Product Filters and Variation Swatches

This topic has 11 replies, 2 voices, and was last updated 1 years, 10 months ago ago by Rose Tyler

Naborhi

Participant

February 12, 2023 at 06:13

Hi,

I have a few questions that I haven’t been able to find solutions to by myself

1) Variation Swatches – I notice on the demo sites that the out of stock attributes are struck through/crossed out on the shop page, however this functionality is not working for me, and only works on the product page. How can I enable this on the shop page?

2) Also, how do I only show in stock attributes (eg available sizes) when filters are applied on the shop page.

3) How do I apply the product filters and get them to look like this demo you have here? I have a fully functioning site so I don’t want to import the whole demo to get this functionality. I love the styling and formatting of it, so if you can point me in the right direction I’d appreciate it 🙂

https://xstore.8theme.com/elementor/demos/marseille02/shop/

4)Lastly, where do I find the settings to change the alignment of the text that appears under the thumbnails on the shop page, I’d prefer it all to be left aligned than centered

Thank you in advance
Temi

#346670 Copied Theme version: 9.0.3

10 Answers

Rose Tyler

Support staff

February 12, 2023 at 09:39

Hello, Naborhi,

1, 2/ WooCommerce > Settings > Products > Inventory > Out of stock visibility > Hide out of stock items from the catalog – try this option.

3/ To enable the Classic Widgets Panel, please navigate to Theme Options > General and set the Enable Classic Widgets Panel option to On. Then, go to Appearance > Widgets – https://prnt.sc/uNqCYwjYtkoz
Here is screenshot of Theme options > WooCommerce > Shop > Shop page Filters: https://prnt.sc/9OGclUtI4uxS

4/ Custom CSS code can be used to achieve the desired result. Please provide us with the URL of your Shop page via the Private Content area here, and we will provide you with the code.

Kind Regards,
8theme team

#346697 Copied

Naborhi

Participant

February 12, 2023 at 14:50

Hi,

Thank you for your quick response 🙂

I’d also like to reduce the space between the Images similar to this website
is this possible?

https://ullajohnson.com/collections/dresses

I’m having issues with the filters. The stock status filter combined with the size filters doesn’t seem to work. I have back order products as well as immediately available products, but I’m getting different results for different products with the same settings

For example I do a site search on ‘Naade’ and then select Size 12 from the size filter and then the In Stock option for Stock status, but the results don’t filter at all

Can you advise?

Thank you

Please contact administrator
for this information.

#346707 Copied
Rose Tyler

Support staff

February 12, 2023 at 15:57
Hello, Naborhi,

4/
```
.products-loop .content-product .product-details,.swiper-container .content-product .product-details {
    text-align: start
}
```
5/
```
.product {
    padding: 1px;
}
```
6/ Could you record a video for a better understanding the problem?

Please try to: WooCommerce > Status > Tools > click on Regenerate the product attributes lookup table.

Please try to disable all the third-party plugins (including cache plugins), that does not come bundled with XStore https://www.8theme.com/documentation/xstore/plugins/included-plugins/, clear the cache of the browser, and check then. Maybe one of the additional plugins is the reason for the problem.

Kind Regards,
8theme team
#346710 Copied
Naborhi

Participant

February 13, 2023 at 03:31

Thank you. I’ve added the CSS and it works as expected.

I have started the regeneration process, hopefully this issue can be fixed

#346735 Copied

Naborhi

Participant

February 13, 2023 at 03:58

It’s not working at all! 🙁 I’ve had to remove the filters.

Is there any way that I can only have the On Sale status active and remove the In stock and out of stock checkboxes?

#346736 Copied

Rose Tyler

Support staff

February 13, 2023 at 09:33

Hello, Naborhi,

We suggest that you consider using a plugin to achieve the desired functionality. We recommend that you contact the support team at WooCommerce for advice on which plugin would be best suited for your needs.

Kind Regards,
8theme team

#346761 Copied

Naborhi

Participant

February 13, 2023 at 12:17

Hi Rose,

Can you advise how I can amend the code to show only the On Sale product status?

Thank you

#346777 Copied
Rose Tyler

Support staff

February 13, 2023 at 15:55
Hello, Naborhi,

If you mean to leave only “On sale” item in Product status filter -> https://prnt.sc/anlTE-1mZWKo
then you may simply hide other items with the next custom CSS
```
.etheme_product_status_filter .etheme-ajax-filter:not(.etheme-sale-filter) {
    display: none;
}
```
Frontend result: https://prnt.sc/L4Gfa7NW1OIi

Kind Regards,
8theme team
#346811 Copied
Naborhi

Participant

February 13, 2023 at 16:19

Yes that what I meant, thank you so much 🙂

#346816 Copied

Rose Tyler

Support staff

February 13, 2023 at 16:31

Hello, Naborhi,

You’re welcome!

Kind Regards,
8theme team

#346821 Copied
Tagged: configuring, product-filters, seo friendly, variation swatches, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)