Return to previous page

Product Page Layout - by santiarango - on WordPress WooCommerce support

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

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!

#122984 Copied Theme version: 2.6 WooCommerce version: 4.5

11 Answers

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.

#122992 Copied

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.

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

#123029 Copied Theme version: 2.6 WooCommerce version: 2.5.5

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.

#123031 Copied

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.

#123162 Copied Theme version: 2.6 WooCommerce version: 2.5.5

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.

#123201 Copied

santiarango

Participant

April 27, 2016 at 17:53

Alright, we turned that user to full admin.

Regards.

#123221 Copied
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.
#123236 Copied
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.

#123579 Copied
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
#123609 Copied
santiarango

Participant

April 30, 2016 at 23:49

Great, thank you so much for your support!

#123635 Copied

Eva Kemp

Support staff

May 3, 2016 at 08:52

Hello,

You’re welcome.

Regards,
Eva Kemp.

#123723 Copied
Tagged: design, layout, page, product, templates, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)