Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2798709
woocomerce filler
Closed

Comments

  • thammyorg started the conversation
    June 10, 2021 at 3:14am

    226 / 5000

    I want to add product search and filter by price in shop page and product category, how do I do that?
    On the mobile interface, I want in the shop page and the product list divided into 2 columns to display, how do I do that?

  •  2,615
    PenciDesign replied
    June 10, 2021 at 3:46am

    Hi,

    1. Please go to Appearance > Widgets, add Product Search & Filter Product by Price to Sidebar for Shop Page & Shop Archive.

    2. Please go to Appearance > Customize > Custom CSS, then add the following custom CSS code:

    @media only screen and (max-width: 479px) {
        .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .penci_sidebar ul.products li.product, .woocommerce-page .penci_sidebar ul.products li.product {
            width: 48% !important;
            margin-right: 4% !important;
        }
    }
    Best Regards,
    PenciDesign.

  • thammyorg replied
    June 10, 2021 at 3:58am

    Thanks for the very quick reply!
    I apologize for the lack of information in question #1.
    I mean to show filter and search at the top in mobile version



  •  2,615
    PenciDesign replied
    June 10, 2021 at 4:36am

    Hi,

    Please add more CSS to Custom CSS:

    @media only screen and (max-width: 479px) {
        .container.penci_sidebar.right-sidebar {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    Best Regards,
    PenciDesign.


  • thammyorg replied
    June 10, 2021 at 4:44am

    Shop page has been divided into 2 columns, but it's displayed on the homepage like this
    help me please
    thanks!

  •  2,615
    PenciDesign replied
    June 10, 2021 at 4:51am

    Hi,

    Please modify the custom CSS of 2nd replied like this:

    @media only screen and (max-width: 479px) {
    body.woocommerce.archive ul.products li.product,
        body.archive.woocommerce-page ul.products li.product,
        body.woocommerce.archive .penci_sidebar ul.products li.product,
        body.archive.woocommerce-page .penci_sidebar ul.products li.product {
            width: 45% !important;
            margin-right: 4% !important;
        }
    }
    This code only applies to the archive and shop page.

    Best Regards,
    PenciDesign.

  • thammyorg replied
    June 10, 2021 at 5:09am

    well, done!
    can i also split this into 2 columns on mobile?
    thanks!

  •  2,615
    PenciDesign replied
    June 10, 2021 at 5:13am

    Hi,

    These elements you're building with Elementor, so please go to Elementor and change the display width for mobile.

    You can view document here: https://elementor.com/help/mobile-editing/

    Best Regards,
    PenciDesign.

  • thammyorg replied
    June 10, 2021 at 5:37am

    thank u so much