Return to previous page

Single Product Page – Vertical Spacing

This topic has 11 replies, 3 voices, and was last updated 7 years, 10 months ago ago by 8theme

George

Participant

December 28, 2016 at 20:16

ALL THESE QUESTIONS REFERENCE THE SINGLE PRODUCT PAGE

1.) On one of the last Xstore upgrades I noticed that the vertical spacing on the single product page is a problem. Please see the link: http://www.exteriorcoatings.com/shop/5700-esd-polyurethane-concrete-floor-paint/ The top of the First line of the center product information area titled: PRODUCT INFORMATION should be the same vertical height as the top of the adjoining areas (Product picture to the left and brand widget to the right). This causes more content below the fold than should be.

2.) How do I eliminate displaying the product tags to free up more vertical height? Still want to use them for searching.

3.) How do I reduce the vertical padding space between the social icons and the product tabs?

4.) How can I reduce vertical padding space on variable products between the “choose an option” box and the ADD TO CART button?

5.) I would like to change the name of the word “CLEAR” which shows up on variable products after a attribute selection is made (right below the selection). The word clear has meaning on many of my products and it is confusing. For products I have only one variable attribute, can I eliminate this feature altogether to prevent more vertical space opening up? The function only makes sense on products with 2 or more variable attributes.

6.) I want to increase the width of the box displaying the variable attribute selected. I have many instances where the number of characters exceeds the available space and it doesn’t look right. I would think it should be floating with the number of characters for the attribute. That way it doesn’t need to be set for each product or look to large if I select the widest needed. See this link for example of longer attribute: http://www.exteriorcoatings.com/shop/micro-seal-water-repellent/

#150450 Copied Theme version: XStore Child Theme 3.3 WooCommerce version: 2.6.11

10 Answers
Olga Barlow

Support staff

December 30, 2016 at 10:24
1) Go to Theme Options > Styling > Custom CSS and remove the custom code
```
.product-information-inner {
    padding-top: 5vw;
}
```
2) To hide tags on product page add the following styles in custom CSS
.product-information .tagged_as {display: none !important;}

3) .product-content {margin-bottom: 0;}

4) .product-information form.variations_form.cart .single_variation_wrap, .product-info-wrapper form.variations_form.cart .single_variation_wrap, .product-summary-center form.variations_form.cart .single_variation_wrap {margin-top: 0;}

5) This is default WooCommerce plugin option and we don’t have any options for this. As I know WooCommerce also doesn’t have advanced options for that button. But you can search on WC support forum. Maybe you’ll get any solution.

6) Use the following custom
```
.product-information table.variations td.value select, .product-info-wrapper table.variations td.value select, .product-summary-center table.variations td.value select {
    width: 100%;
}
```
Regards
#150565 Copied
George

Participant

December 30, 2016 at 15:51

You’re a champ. I am NOT a technical person and I was able to make all these adjustments and even better, they work :). Thanks.

#150602 Copied

Olga Barlow

Support staff

December 30, 2016 at 20:29

You are welcome!
Happy New Year!

Regards

#150630 Copied

George

Participant

January 5, 2017 at 06:34

Olga I need your help. Today I was adding CSS code as instructed today Jan 4 by Serg, #156698 to try to adjust something on the single product page, that I posted on Dec 30, #150611. It didn’t work and when I deleted it, it caused all the changes you gave me above to not work (see my items #1,2, 3, 4, 6 on your instructions item #150565. I tried clearing the cache but that didn’t help. Now my main header logo is WAY to BIG for some reason.

Please help! Logon details on private.

Thanks 🙂

Please, contact administrator
for this information.

#150901 Copied

George

Participant

January 5, 2017 at 07:57

Further information on my posting #150901 earlier today. Video tab on the single product page has now also stopped working. Pictures are only showing about 10% of the vertical height on desktop view. Appreciate your help!

#150904 Copied

8theme

Support staff

January 5, 2017 at 11:45

Hello,

It seems that you have changed some CSS code that cause validations errors. In this case, you need to clear all Custom CSS code and add everything one by one again and see what will work and what will not work correctly.
Write us about the result.

Regards

#150931 Copied

George

Participant

January 5, 2017 at 15:13

Ok. Where do I get the “original” CSS Customer code that was in there in case I overwrote or erased something. Do I have to start my website over again and reload new XStore? Appreciate the help.

#150949 Copied

8theme

Support staff

January 6, 2017 at 08:27

Do you mean Custom CSS that was provided on our support forum? But you can easily copy it from here again. Or just save it some file on your computer.

#151002 Copied

George

Participant

January 6, 2017 at 08:36

I am ok now. I am not sure what happened, so I just deleted Xstore and Child Theme and re-entered since almost all of my work to date has been in the Woo Commerce area so didn’t lose too much. Still have issues but not on this request.

#151004 Copied

8theme

Support staff

January 6, 2017 at 10:31

Ok, so we close this topic and move to another one.

#151038 Copied
Viewing 11 results - 1 through 11 (of 11 total)