Elementor + Oceanwp + Products widget (WooCommerce)

  • Hi, I am using Elementor on Oceanwp, I set up a sales page using Products Widget (default theme widget). The products appear perfectly of Desktop and Tablet view but it does not fit to the screen on mobile. also the Grid/List button are not visible. How can I make the product ( 2 column) display fit to screen on mobile view Exactly the way the 2 column products view displays on https://www.iceshopy.com/shop?

    • This topic was modified 5 years, 2 months ago by icetechy.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hello,

    Go to Customize > Woocommerce > Archive section – find shop column settings and click on the mobile icon at the button. Now select the shop column for mobile view.

    Thread Starter icetechy

    (@icetechy)

    Hi I have done this already a long time ago “Go to Customize > Woocommerce > Archive section” this setting works ONLY for “Shop” page (archive display). This time I am using the OceanWP theme default “Products widget” on two pages which are

    https://www.iceshopy.com/new-arrivals/
    and
    https://www.iceshopy.com/sales/.

    Now I just want the products displayed on these pages to appear in same way they appear in Shop page which fits into the screen in mobile view.

    Product widget is different from Archive widget (Archive widget is not displaying any product on a custom page).

    Try using the below css code and check it works or not – 

    @media (max-width: 767px) {
.elementor-element.elementor-products-grid.elementor-products-columns-mobile-2 ul.products {
    grid-template-columns: repeat( 2, minmax(25%, 1fr)) !important;
}
}
    Thread Starter icetechy

    (@icetechy)

    Hi there is a css syntax error on the line of “grid-template-columns”. I actually tried this code before but the CSS property (grid-template-columns) is not working on WordPress as it is shows it is an unknown property. I don’t know why. Is there any other way? below are the screenshots:

    https://prnt.sc/p9tdgk

    https://prnt.sc/p9te2z

    Initially this is the CSS codes I used to get the perfect display I needed using Elementor editor:

    @media (max-width: 767px){
    .elementor-element.elementor-products-grid.elementor-products-columns-mobile-2 ul.products {

    grid-template-columns: repeat( 2, minmax(25%, 1fr));
    }}

    but is shows that the CSS property (grid-template-columns) is an unknown property. I do not know why!

    • This reply was modified 5 years, 2 months ago by icetechy.
    • This reply was modified 5 years, 2 months ago by icetechy.
    • This reply was modified 5 years, 2 months ago by icetechy.
    Thread Starter icetechy

    (@icetechy)

    Hi I have not heard from you please kindly respond as I am yet to solve this issue.

    I have the same problem, the only difference is that I can not do this on mobile devices so that there is one column

    I am using the elementor Pro editor.

    I’m here with the same problem. Hopefully Amit Singh can help us out

    The same problem here!

    OceanWP Pro+ Elementro PRO on the mobile view cant change row quantity. Only two row set as defaults and cant change it.

    OceanWP Version: 1.8.3
    Elementor Version 2.9.5

    Same problem here…

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Elementor + Oceanwp + Products widget (WooCommerce)’ is closed to new replies.

Tags