This topic has 12 replies, 4 voices, and was last updated 8 years, 8 months ago ago by Eva Kemp
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!
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.
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.
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.
Thanks for your help.
Regards
Hello,
Please provide us with site name and WP Dashboard credentials in private content.
Best regards,
Jack Richardson.
Sure, down there I send you the access to the WP dashboard.
Hello,
We need to see what code you have used, so please give us full access to WP Dashboard.
Thank you.
Regards,
Eva Kemp.
Alright, we turned that user to full admin.
Regards.
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.
That looks great! Can we use the same Custom CSS for mobile? We see it doesn´t align center in mobile. Thanks for this.
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
Great, thank you so much for your support!
Hello,
You’re welcome.
Regards,
Eva Kemp.
The issue related to '‘Product Page Layout’' has been successfully resolved, and the topic is now closed for further responses