Configuring Product Filters and Variation Swatches

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

  • Avatar: Naborhi
    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

    10 Answers
    Avatar: Rose Tyler
    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

    Avatar: Naborhi
    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.
    Avatar: Rose Tyler
    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://xstore.helpscoutdocs.com/article/36-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

    Avatar: Naborhi
    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

    Avatar: Naborhi
    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?

    Avatar: Rose Tyler
    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

    Avatar: Naborhi
    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

    Avatar: Rose Tyler
    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

    Avatar: Naborhi
    Naborhi
    Participant
    February 13, 2023 at 16:19

    Yes that what I meant, thank you so much 🙂

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 13, 2023 at 16:31

    Hello, Naborhi,

    You’re welcome!

    Kind Regards,
    8theme team

  • Viewing 11 results - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.