WordPress.org

Forums

Jetpack by WordPress.com
[resolved] Jetpack + Woocommerce mobile view (14 posts)

  1. Palexandra
    Member
    Posted 1 year ago #

    Hi,

    So I installed Jetpack looking forward to have a better mobile version of my website but it just simply does not work.... the result is not steticaly pleasant and still messy.... any idea on how to fix this or why is this happen?

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you post links to some the pages that do not look good on mobile, so I can investigate further?
    Could you also let me know these pages are product views, or other specific Woocommerce pages?

    If you want your site URL to remain private, you can also contact us via this contact form:
    http://jetpack.me/contact-support/

    Thanks!

  3. Palexandra
    Member
    Posted 1 year ago #

    It happens on the website all around, it might have to do with my theme but not sure how to go about it.

    I disable this but will enable it for a bit so that you can see how it looks on mobile (I have been using Iphone to take a look at it).

    The website is http://www.AmazingRCstore-shop.com, let me know and thanks for your help.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You will need to add some extra custom CSS rules to customize the woocommerce elements on mobile.

    To get started, please go to Appearance > Edit CSS in your dashboard, and check the "Mobile Compatible" option on the right side.

    Then, you can add CSS rules that will only be applied to Jetpack's Mobile Theme, like so:

    .mobile-theme .woocommerce ul.products li.product, .mobile-theme .woocommerce-page ul.products li.product {
    width:100%;
    }

    As long as you use the .mobile-theme class before all your CSS changes, it will only be applied to the Mobile Theme.

    That should allow you to customize Woocommerce as much as you want, without affecting your main site.

    I hope this helps.

  5. Palexandra
    Member
    Posted 1 year ago #

    Hi Jeremy,

    Thank you so much for taking a look at this. That sounds great, so I can just ad that code to the CSS Stylesheet Editor?

  6. Palexandra
    Member
    Posted 1 year ago #

    Sorry Jeremy, I have no experience with writing CSS so I copied the code above on my CSS Stylesheet and the result is still the same, im guessing i have to specify the style... do you know where can i learn more about this? Im just looking for the store to look more organized and not as long when looking at the mobile version.

  7. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I checked your site, and the Mobile Theme doesn't seem to be activated anymore. The code I mentioned earlier will only work when jetpack's Mobile Theme module is activated, I'm afraid.

  8. Palexandra
    Member
    Posted 1 year ago #

    Hi Jeremy,

    Sorry, I de-activated it but I tried it with the code you gave me and it made no difference.... I can activate it again so that you can see it. Basically my css edit is empty except for the code you provided.
    I will activate it for a few hours so that you can see it.

  9. Palexandra
    Member
    Posted 1 year ago #

    */
    .mobile-theme .woocommerce ul.products li.product, .mobile-theme .woocommerce-page ul.products li.product {
    width: 50%;

    this is all my css sheet has right now, am i missing anything?

  10. Palexandra
    Member
    Posted 1 year ago #

    first and last line have a red X on the side... im pretty sure im doing something wrong

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    The code you pasted above is missing a closing }.

    You'll also want to set the width to 100%, as I did above, to get better results.

  12. Palexandra
    Member
    Posted 1 year ago #

    Thanks Jeremy, I have changed it, but still no difference.

  13. Palexandra
    Member
    Posted 1 year ago #

    I will keep it activated so that you can see it and maybe tell me what am i missing.

  14. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hm, I made a mistake in the code I gave you earlier. Try the following:

    .mobile-theme #content ul.products li.product {
    width:100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic