Different mobile styling for custom WooCommerce shortcode

  • Resolved Guido

    (@guido07111975)


    3 years, 12 months ago

    Hi,

    I’m using WooCommerce at one of my sites and have added their shortcode [recent_products columns="4" limit="4"] to list my 4 most recent products.

    I notice the mobile styling differs from the regular product pages. Normally 2 columns in screens of max 768px, but with this shortcode only 1 column. I thought this was caused by WooCommerce, but now notice this might be the inline styling of GeneratePress. I have added [ redundant link removed ] that contains the shortcode.

    The inline CSS is wrapped in <style id='woocommerce-general-inline-css'>

    For more info, please take a look at this topic from earlier today.

    My question, is this generated by GP or not? Is this something that needs a fix?

    Guido

    • This topic was modified 3 years, 11 months ago by Jan Dembowski.

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • David

    (@diggeddy)

    3 years, 12 months ago

    Hi there,

    the GeneratePress theme doesn’t add any CSS for Woocommerce. We only add it in the GP Premium plugin.
    And all of our enqueue script/style handles begin with generate-. So that <style id='woocommerce-general-inline-css'> isnt from GP or GP Premium

    Thread Starter Guido

    (@guido07111975)

    3 years, 12 months ago

    Hi David / @diggeddy,

    With support from WooCommerce (link) I’ve found it, it’s part of the GP theme:
    wp-content/themes/generatepress/inc/plugin-compat.php

    Caused by this:

    
.woocommerce ul.products li.product,
			.woocommerce-page ul.products li.product,
			.woocommerce-page[class*=columns-] ul.products li.product,
			.woocommerce[class*=columns-] ul.products li.product {
				width: 100%;
				float: none;
			}

    So, by default it should be 2 columns in small screens instead of 1 column (full width). Are you willing to take this into consideration?

    Guido

    David

    (@diggeddy)

    3 years, 12 months ago

    Hi Guido,

    firstly my apologies for wasting your time. I have actually never come across that before as i always build Woo sites with GP Premium … so i learnt something today…

    Do you want a hand with some CSS to change it to two columns?
    Or are you suggesting we modify the themes CSS? As this would cause legacy site issues.

    Let me know. And apologies once again

    Thread Starter Guido

    (@guido07111975)

    3 years, 12 months ago

    Hi David,

    No worries. You’re never too old to learn 😉

    I would like to remove this from my head section.

    This is adding it:

    
add_action( 'wp_enqueue_scripts', 'generate_woocommerce_css', 100 );

    So I thought to remove it from my head this way, but no effect:

    
function gp_remove_script() {
    wp_dequeue_script( 'generate_woocommerce_css' );
}
add_action( 'wp_enqueue_scripts', 'gp_remove_script', 101 );

    Am I missing something?

    Guido

    David

    (@diggeddy)

    3 years, 12 months ago

    Try the wp_print_scripts hook – see here:

    https://developer.wordpress.org/reference/functions/wp_dequeue_script/#comment-672

    Thread Starter Guido

    (@guido07111975)

    3 years, 12 months ago

    Nope, no effect:

    
function wpdocs_dequeue_script() {
    wp_dequeue_script( 'generate_woocommerce_css' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

    Changing priority neither has effect.

    Guido

    David

    (@diggeddy)

    3 years, 12 months ago

    Grr… try directly uhooking it:

    remove_action( 'wp_enqueue_scripts', 'generate_woocommerce_css' );

    Thread Starter Guido

    (@guido07111975)

    3 years, 12 months ago

    Nope 🙁

    If you have a test install with GP and WC you can try yourself. You will notice this code in head section:

    
<style id='woocommerce-general-inline-css'>
.woocommerce .page-header-image-single {display: none;}.woocommerce .entry-content,.woocommerce .product .entry-summary {margin-top: 0;}.related.products {clear: both;}.checkout-subscribe-prompt.clear {visibility: visible;height: initial;width: initial;}@media (max-width:768px) {.woocommerce .woocommerce-ordering,.woocommerce-page .woocommerce-ordering {float: none;}.woocommerce .woocommerce-ordering select {max-width: 100%;}.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.woocommerce-page[class*=columns-] ul.products li.product,.woocommerce[class*=columns-] ul.products li.product {width: 100%;float: none;}}
</style>

    Only way so far to remove it is to delete the string from file plugin-compat, but that’s not how it should be done.

    Guido

    Theme Author Tom

    (@edge22)

    3 years, 12 months ago

    Hi there,

    You should be able to do this:

    add_action( 'wp', function() {
    remove_action( 'wp_enqueue_scripts', 'generate_woocommerce_css', 100 );
} );

    Let me know 🙂

    Thread Starter Guido

    (@guido07111975)

    3 years, 12 months ago

    Hi Tom,

    Yup, that did the trick. Great! Never heard of the wp hook before, by the way.

    Changing this default CSS from 1 to 2 columns is not an option, as Davd told me?

    Thanks!

    Guido

    fernandoazarcon2

    (@fernandoazarcon2)

    3 years, 12 months ago

    Hi @guido07111975,

    If you would like to make the products show up in 2 columns on mobile, here is a CSS code you may try adding to Appearance > Customize > Additional CSS:

    @media (max-width: 768px) {
    div.woocommerce ul.products li.product.type-product{
        width:48%;
        float:left;
    }
}

    Kindly let us know how it goes. 🙂

    Thread Starter Guido

    (@guido07111975)

    3 years, 12 months ago

    Hi Fernando,

    Thanks for your reply.
    With the fix from Tom I have disabled the custom CSS from the GP-theme. This also means it’s now 2 columns in mobile (because that’s default WC styling).

    Guido

    fernandoazarcon2

    (@fernandoazarcon2)

    3 years, 12 months ago

    I see. Glad you were able to resolve the issue! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

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

The topic ‘Different mobile styling for custom WooCommerce shortcode’ is closed to new replies.