Product Gallery on single product page - by Anuschkja

This topic has 6 replies, 2 voices, and was last updated 3 years, 2 months ago ago by Rose Tyler

  • Avatar: Anuschkja
    Anuschkja
    Participant
    October 21, 2021 at 15:45

    Hey Guys, how can i center the product gallery image on a single product page without setting the content to 100%?
    There are buttons on the single product builder to center/left/right but those changes do not appear.
    Thanks in advance.

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 22, 2021 at 08:10

    Hello,

    Add the next code in Theme options > Theme custom CSS:

    .single-product .woocommerce-product-gallery.images-wrapper {
        margin: auto !important;
    }

    Regards

    Avatar: Anuschkja
    Anuschkja
    Participant
    October 22, 2021 at 10:12

    Great, thanks.
    Any custom code for the shop page to have on the mobile version one product per row instead of two as I set this to two on desktop?
    Kind regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 22, 2021 at 10:34

    Hello,

    Add the next code in Theme options > Theme custom CSS > Mobile:

    .products-grid .product {
        width: 100% !important;
    }

    Regards

    Avatar: Anuschkja
    Anuschkja
    Participant
    October 22, 2021 at 20:18

    Amazing. And last but not least, how can i center the variation swatches?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 23, 2021 at 08:03

    Use the next custom CSS code:

    .single-product form.cart table.variations td.label, .single-product form.cart table.variations td.value {
        text-align: center;
    }

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Product Gallery on single product page’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.