Product Page Layout - by santiarango - on WordPress WooCommerce support

This topic has 12 replies, 4 voices, and was last updated 8 years, 8 months ago ago by Eva Kemp

  • Avatar: santiarango
    santiarango
    Participant
    April 26, 2016 at 15:35

    Hi, we are having problems with CSS custom adjustments of Royal Theme at the Product Page.

    We aligned center most items of the product information div allocated at the right side of product page, but still we don´t manager to align center these 3 items: menu-social-icons, quantity input field, and Add to Cart button, we need this last to be centered under the quantity input field, how can we do this?

    Additionally, how can we hide the accordion tabs of additional information, reviews and custom tab under product info at product page?

    Thanks!

    11 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 26, 2016 at 15:59

    Hello,

    Please provide us with WP Dashboard credentials and show a screenshot what you want to achieve.
    To hide tabs please refer to Woocommerce article https://docs.woothemes.com/document/editing-product-data-tabs/ .

    Best regards,
    Jack Richardson.

    Avatar: santiarango
    santiarango
    Participant
    April 26, 2016 at 18:37

    Hi
    Here we attached 2 images, first one is the site as we currently have it with some items aligned center and others that we haven´t been able to align center via Custom CSS.

    Product Page as we have it

    This is what we need, 4 items left to be aligned center, getting rid of the information tabs under product info and changing the Related Products title.

    Product Page as we need it

    Thanks for your help.
    Regards

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 26, 2016 at 18:41

    Hello,

    Please provide us with site name and WP Dashboard credentials in private content.

    Best regards,
    Jack Richardson.

    Avatar: santiarango
    santiarango
    Participant
    April 27, 2016 at 15:19

    Sure, down there I send you the access to the WP dashboard.

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    April 27, 2016 at 16:46

    Hello,

    We need to see what code you have used, so please give us full access to WP Dashboard.

    Thank you.

    Regards,
    Eva Kemp.

    Avatar: santiarango
    santiarango
    Participant
    April 27, 2016 at 17:53

    Alright, we turned that user to full admin.

    Regards.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 27, 2016 at 19:42

    Hello,

    I’ve added this code in Custom CSS for desktop section:

    .product-information .quantity {
        margin-left: 48% !important;
        margin-bottom: 20px;
    }
    .product-information .cart button[type="submit"] {
        float: none;
        text-align: center;
    }
    .product-information .yith-wcwl-add-to-wishlist {
      margin-left: 20%;
    }
    .product-information .menu-social-icons {
      margin-left: 32%;
    }

    Please check single product page now.

    To rename “Related products” title you need edit the file wp-content/themes/royal/woocommerce/single-product/related.php in line 30.

    Best regards,
    Jack Richardson.

    Avatar: santiarango
    santiarango
    Participant
    April 29, 2016 at 17:33

    That looks great! Can we use the same Custom CSS for mobile? We see it doesn´t align center in mobile. Thanks for this.

    Avatar: Robert Hall
    Robert Hall
    Support staff
    April 30, 2016 at 07:31

    Hello,

    I’ve added this code in Custom CSS for mobile. Please check.

    .product-information .menu-social-icons {
        position: relative;
        left: 50%;
        margin-left: -100px;
    }
    .product-information .cart button[type="submit"] {
        float: initial;
        margin-top: 15px;
        margin-left: 0px;
    }
    .single-product .quantity {
    float: initial;
        position: relative;
        width: 40px;
        margin: auto;
        height: 40px;
    }

    Regards,
    Robert Hall

    Avatar: santiarango
    santiarango
    Participant
    April 30, 2016 at 23:49

    Great, thank you so much for your support!

    Avatar: Eva
    Eva Kemp
    Support staff
    May 3, 2016 at 08:52

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

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

The issue related to '‘Product Page Layout’' 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.