Return to previous page

Single Product Page - by Gry4you - on WordPress WooCommerce support

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

Gry4you

Participant

March 1, 2018 at 14:42

Hello,

You helped me change the look of a single product page one month ago.
I don’t t know what happened, but suddenly the site has changed and it looks ugly. The upper columns are wider than the description and besides they stick together and there is no margin between them.

https://gry4you.com/wp-content/uploads/2018/02/single-product-page_1.jpg

I added a code that I received from you two weeks ago, but today is something wrong:

.single-product .product-content .row>div {
border: 1px solid #e6e6e6;
}
.single-product-booking .product-side-information {order: 3;}
.single-product .product-content .product-images {order: 2;}
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information,
.left-bar .tab-content, .left-bar .left-titles li.active {
background-color: #fafafa;
}
.single-product-booking .product-side-information-inner>div {
padding: 50px 0;
}
@media screen and (min-width: 1200px){
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information {
width:33.333%
}
.single-product .product-content .row>div {
margin: 10px;
padding: 15px;
}
}
@media only screen and (max-width: 992px){
.single-product-booking .product-side-information, .product-fixed-content .product-information {
width: 100%;
}
}

Single product page should have margin between colum 1, 2 and 3 and the same width size like here:
https://gry4you.com/wp-content/uploads/2018/02/single-product-page_2.jpg

PS. More info you will find in a Private Content.

Regards
Damian

Please, contact administrator
for this information.

#186835 Copied Theme version: 4.20 WooCommerce version: 3.3.3

17 Answers

Gry4you

Participant

March 1, 2018 at 16:14

Hello,

How to reduce the distance from the header and footer on page login/register page?
https://gry4you.com/wp-content/uploads/2018/03/distance_login_register_page_1.jpg

Between the image and header or footer is 150px on login/register page.

Regards
Damian

#186849 Copied Theme version: 4.20 WooCommerce version: 3.3.3

Olga Barlow

Support staff

March 2, 2018 at 18:52

Hello,

I should be able to disable plugins (cache and maintenance mode) to check and help you.

Regards

#187015 Copied

Gry4you

Participant

March 5, 2018 at 00:32

Hello,

WP Cache and Maintenance Mode have were turned off! You can try:)

1. After changing 3 of 4 buttons (in add-product) such as: compare, add to cart and quick view are square (border-radius: 4px).
https://gry4you.com/wp-content/uploads/2018/03/buttons_1.jpg

I don’t know how to change the fourth button – wishlist! It means, how to add css code (border-radius: 4px) and hover color #000000 to wishlist button and quick view button like compare button/ad to cart.

2. How to reduce the distance from the header and footer on page login/register page?
https://gry4you.com/wp-content/uploads/2018/03/distance_login_register_page_1.jpg

Between the image and header or footer is 150px on login/register page.

Regards
Damian

#187100 Copied Theme version: 4.21 WooCommerce version: 3.3.3

Gry4you

Participant

March 5, 2018 at 00:39

Hello again,

When I disabled WP Cache the Single Product Page looks great! I will try to find problem inside WP Cache plugin.

Please help me with other.

Regards
Damian

#187101 Copied Theme version: 4.21 WooCommerce version: 3.3.3
Olga Barlow

Support staff

March 6, 2018 at 11:34
Hello,

1. Done.
2. I have added the following code to custom CSS
```
#customer_login {
    margin: 0;
}
```
3. I suppose that styles problem with the cache can be related to minification option.

Regards
#187311 Copied
Gry4you

Participant

March 7, 2018 at 11:26

Hello,

Thank you for help. It’s ok.

Regards
Damian

#187486 Copied Theme version: 4.21.1 WooCommerce version: 3.3.3

Rose Tyler

Support staff

March 7, 2018 at 13:26

Hello,

You’re welcome!
Have a nice day.

Regards

#187499 Copied

Gry4you

Participant

March 13, 2018 at 16:58

Hello,

I would like to add information about points from yith-woocommerce-points-and-rewards plugin to single product page.

When plugin is disabled signle product page looks good:
https://gry4you.com/wp-content/uploads/2018/03/single_product_page_1.jpg

When plugin is enabled the size of the columns changes and I don’t know why?
https://gry4you.com/wp-content/uploads/2018/03/single_product_page_2.jpg

Cache Plugin which blocked css code is disabled!

I used this css code Olga which Olga added:
.single-product .product-content .row>div {
border: 1px solid #e6e6e6;
}
.single-product-booking .product-side-information {order: 3;}
.single-product .product-content .product-images {order: 2;}
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information,
.left-bar .tab-content, .left-bar .left-titles li.active {
background-color: #fafafa;
}
.single-product-booking .product-side-information-inner>div {
padding: 50px 0;
}
@media screen and (min-width: 1200px){
.single-product .product-content .product-images,
.single-product-booking .product-side-information,
.product-fixed-content .product-information {
width:33.333%
}
.single-product .product-content .row>div {
margin: 10px;
padding: 15px;
}
}
@media only screen and (max-width: 992px){
.single-product-booking .product-side-information, .product-fixed-content .product-information {
width: 100%;
}
}

PS. More info you will find in a Private Content.

Regards
Damian

Please, contact administrator
for this information.

#188104 Copied Theme version: 4.21.1 WooCommerce version: 3.3.3

Rose Tyler

Support staff

March 14, 2018 at 09:02

Hello,

Is your problem solved https://prnt.sc/iqynzu ?

Regards

#188137 Copied

Gry4you

Participant

March 14, 2018 at 10:35

Hello,

Yes, but I don’t know why the description font is bolded?

font-weight: 700;

Regards
Damian

#188151 Copied Theme version: 4.21.1 WooCommerce version: 3.3.3

Rose Tyler

Support staff

March 14, 2018 at 10:51

Hello,

Here is <strong> – http://prntscr.com/ir03le so check the description content from the backend.

Regards

#188157 Copied

Gry4you

Participant

March 19, 2018 at 13:32

Hello,

I changed the code and removed strong. No it’s ok.

Could you tell me when I will find icon settings in the product carousel on the main page?
https://gry4you.com/wp-content/uploads/2018/03/main-page-product-icons_1.jpg

When I turned on the Yith Pre-Order plugin icons settings have changed:
https://gry4you.com/wp-content/uploads/2018/03/main-page-product-icons_3.jpg

There is a string “Available from”:
https://gry4you.com/wp-content/uploads/2018/03/main-page-product-icons_4.jpg

Like in a single page product:
https://gry4you.com/wp-content/uploads/2018/03/main-page-product-icons_2.jpg

I want to change the size of the string and the settings of the icons.

PS. I’m able to modify the settings of icons, size and elements that move the icon as in the case of a string “Available from” and other.

Regards
Damian

#188641 Copied Theme version: 4.21.1 WooCommerce version: 3.3.3

Rose Tyler

Support staff

March 20, 2018 at 13:16

Hello,

To modify these icons and text you need to use custom css code. Please describe the desired result in details and we will help with the custom code.

Regards

#188739 Copied

Gry4you

Participant

March 20, 2018 at 14:54

Hello,

It’s easy.

I have 4 icons in the product carousel on the main page (add to wishlist/add to cart/quick view and compare). When I enable YITH Pre-Order for WooCommerce Plugin
When I turn on the YITH Pre-Order for WooCommerce plugin word “available from” will appear in the middle, which shifts the icons and is scattered.
https://gry4you.com/wp-content/uploads/2018/03/main-page-product-icons_3.jpg
It’s normal view without YITH Pre-Order for WooCommerce Plugin:
https://gry4you.com/wp-content/uploads/2018/03/main-page-product-icons_1.jpg

The best solution is to move the text “available from” up and then the icons will return to normal position, but I don’t know why? I will find solution in style.css in Xstore theme, but I can’t find position of text “available from” from YITH Pre-Order for WooCommerce Plugin.

Regards
Damian

#188762 Copied Theme version: 4.21.1 WooCommerce version: 3.3.3
Rose Tyler

Support staff

March 21, 2018 at 09:06
Hello,

Please use this custom css:
```
.product-slide .content-product .footer-product .pre_order_loop{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform:translateX(-50%);
  -webkit-transform: translateX(-50%);
}
```
Regards
#188830 Copied
Gry4you

Participant

March 21, 2018 at 19:17

Hello,

Thank you for custom css:) I slightly modified the css code and it works.

.product-slide .content-product .footer-product .pre_order_loop-no-auto-format {
position: absolute;
bottom: 100%;
left: 50%;
transform:translateX(-50%);
-webkit-transform: translateX(-50%);
font-weight: 600;
font-size: 14px;
}

Regards
Damian

#188929 Copied Theme version: 4.21.1 WooCommerce version: 3.3.4

Rose Tyler

Support staff

March 22, 2018 at 08:07

Hello,

Great.
Have a nice day.

Regards

#188946 Copied
Viewing 18 results - 1 through 18 (of 18 total)