[Resolved] Possible to swap position of Product Title and Product Images on mobile?

Home Forums Support [Resolved] Possible to swap position of Product Title and Product Images on mobile?

Home Forums Support Possible to swap position of Product Title and Product Images on mobile?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #798307
    Shaun

    Hi guys, on mobile, the product images are at the top while the product title is below them. I was wondering, is it possible to swap their positions, and if so, how can I do it?

    #798528
    David
    Staff
    Customer Support

    Hi there,

    is this for the Single Product or the shop loops?

    #798794
    Shaun

    Hey David, just for the single product pages.

    #798855
    David
    Staff
    Customer Support

    Slightly tricker that one ๐Ÿ™‚

    1. Create a new Hook Element
    Add this to the content:

    <?php
    $mobile_title = woocommerce_template_single_title();
    echo  $mobile_title;
    ?>

    Hook = woocommerce_before_single_product
    Check execute PHP
    And set your display rules to Product > All Products

    Then this CSS to switch which one displays for each device:

    @media (max-width: 768px) {
        .woocommerce.single-product .entry-summary .product_title {
            display: none !important;
        }
    }
    @media (min-width: 769px) {
        .woocommerce.single-product .entry-content > .product_title {
            display: none;
        }
    }
    #799187
    Shaun

    That works! I am so glad I renewed my GP license. Thank you so much David! ๐Ÿ˜€

    #799198
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.