Quote from cold_realms on April 2, 2021, 19:25
So on a single page i try the following shortcodes:
[woof_products is_ajax=1 columns=5 per_page=15 taxonomies=product_cat:23]
[woof_products is_ajax=1 columns=2 per_page=10 taxonomies=product_cat:23]
[woof is_ajax=1 taxonomies=product_cat:23]
When I have the above everything displays correctly. Now, of course, I only want one of the Woof-Products to show on mobile and on to show on desktop, unfortunately, they do not function as such. I tried to assign them SID's to target them via css and I even tried to use the generic:
@media only screen and (max-width: 600px) {
.woocommerce.columns-5.woocommerce-page.woof_shortcode_output {
display: none;
}}
to hide the 5 column one while leaving the 2 column one on mobile. When there is only one [woof_products] shortcode on the page it obeys the CSS but when there are two [woof_products] shortcodes on the page only the first [woof_products] shortcode is displayed, regardless of setting it to display or not.
So on a single page i try the following shortcodes:
[woof_products is_ajax=1 columns=5 per_page=15 taxonomies=product_cat:23]
[woof_products is_ajax=1 columns=2 per_page=10 taxonomies=product_cat:23]
[woof is_ajax=1 taxonomies=product_cat:23]
When I have the above everything displays correctly. Now, of course, I only want one of the Woof-Products to show on mobile and on to show on desktop, unfortunately, they do not function as such. I tried to assign them SID's to target them via css and I even tried to use the generic:
@media only screen and (max-width: 600px) {
.woocommerce.columns-5.woocommerce-page.woof_shortcode_output {
display: none;
}}
to hide the 5 column one while leaving the 2 column one on mobile. When there is only one [woof_products] shortcode on the page it obeys the CSS but when there are two [woof_products] shortcodes on the page only the first [woof_products] shortcode is displayed, regardless of setting it to display or not.