Reduce wasted space on product pages

[hellojonesie]

Hey Atelier team!

I am running into a bit of a problem with a group of my products that require a lot of variable options and text for explanations as to how to personalize. I have reduced the product titel font size but this does little to improve the problem.

I am looking for a solution and here are some different things I’d like to try (if possible):

– Reducing the font size of the price of the product (is there custom code for this?)
– Reducing the height of the variable drop down menus (any way to make these smaller/thinner?)
– Ideally I’d like to be able to put the full text description UNDERNEATH the images (to the left of the screen – in order to get rid of this blank space)… is this possible?? OR if not, insert another image underneath the main image with scrolling gallery (for example I could put an image with steps for the customization of the t-shirt)

Thanks so much in advance, I really appreciate all of your help!

Best,
Amy

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

I cannot view your site:

1) Yes, you can use this CSS. Please add this to Theme Options => Custom CSS:

.woocommerce div.product .summary h3.price {
    font-size: 12px!important;
}

2) You can reduce the size using this CSS. Please add this to Theme Options => Custom CSS:

.woocommerce div.product form.cart .variations select, 
#jckqv table.variations td select {
	padding: 10px 45px 10px 10px;
	height: 48px;
}

3) For these modifications you would need to work with a developer.

Thanks,
David.

[hellojonesie]

Hi David, thank you that was super helpful!

Sorry you weren’t able to access the site – my server is having loading issues 🙁 Something I am working on.

For the Custom CSS, that looks great I just have a bit more to do…

– What code can I use to remove the “SKU” and “Category” underneath the add to cart button on all products?
– Also, I imagine it’s like product title and price, but how can I reduce the size of the font of my variation title? In the screenshot it’s “specify customization”. I am using the product add ons plugin purchased from woocommerce.
– What about reducing the “Share” font for posting on social networks and even making the “add to cart button + quantity” a bit smaller?

Lastly, it is possible to remove most of the white space between the product title, the grey divider line and the product price?

Thanks so much!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Please add this to Theme Options => Custom CSS:

.summary .product_meta {
   display: none;
}

2)

Can you link me to that product.

3) Please add this to Theme Options => Custom CSS:

.sf-share-counts .share-text {
    font-size: 12px;
}

[hellojonesie]

Hi, great thanks so much !

Here’s the product with the “Specify Customization” that i’d like to reduce in size if possible:
http://www.newsite.hellojonesie.com/product/diy-white-unisex-t-shirt/
Do you have an custom CSS for that?

With all the different reductions, things are slowly getting to where id like them to be (without needing a developer!) 🙂
However, I mentioned above — any way to reduce some of this extra white space between the sections (1. Between product title, divder and product price 2. Between the variation drop down menus and the “Specify Customization” or 3.between the share buttons and description)

I’d also like to reduce the height of the “share” section if possible.

Lastly, I’d like to also play around with the size of the “Add to cart” button and the Quantity clicker to it’s left.

I really appreciate all of your help as I know I’m being quite needy.
Thanks so much!
Amy

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

2)

h3.addon-name {
    font-size: 14px;
}

4)

.summary-top {
    padding-bottom: 0px;
    margin-bottom: 20px;
}

5)

div.product-addon {
    margin: 1em 0;
    margin-top: -35px;
}

6)

.woocommerce div.product div.summary .sf-share-counts {
    padding: 10px 0;
}

7) Please be exacting in your request.

The button class is

.woocommerce form.cart button.add_to_cart_button, 
.woocommerce form.cart button.single_add_to_cart_button {

}

The QTY input classes are:

.woocommerce .quantity, 
.woocommerce-page .quantity {

}

You can add your classes to those to amend the style.

[hellojonesie]

I apologize for not being more exact – I am looking to:

1. Reduce the height of the “Add to Cart” and Quantity buttons

2. Reduce the font size for the site’s breadcrumbs

3. Remove the space (in the screenshot) between the share buttons and the grey line above “Description” + remove a bit of the space between that same grey line and the word “Description”

4. Lastly, if I’d like to reduce the size of the font used in general (in the screenshot for example text such as “Whether you have selected an HJ Design…”), should I do so directly in the overall settings with “Body Font” or is the font used for products different than the global “Body Font” for the site?

Thank you!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1)

.woocommerce form.cart button.add_to_cart_button, 
.woocommerce form.cart button.single_add_to_cart_button {
	height: 40px!important;
}
.woocommerce .quantity .minus, 
.woocommerce .quantity input.qty,
.woocommerce .quantity .plus #jckqv_summary .quantity input.qty {
    height: 40px;
    line-height: 46px;
 }  
.woocommerce .quantity .qty-plus, 
#jckqv_summary .quantity .qty-plus {
	height: 20px;
	line-height: 15px;
}

.woocommerce .quantity .qty-minus, 
#jckqv_summary .quantity .qty-minus {
	height: 19px;
	line-height: 20px;
}

2)

nav.woocommerce-breadcrumb {
    font-size: 10px!important;
}

3)

.woocommerce div.product .woocommerce-tabs {
	padding-top: 20px;
	margin-top: 30px;
}

4) Do so in Theme Options => Fonts.

—

Unfortunalty due to the large request of changes, any more CSS changes will need to be done via developer. Support is for theme issues and is not for customisation requests beyond small changes.

Thanks,
David.

[hellojonesie]

Hello David,

Thank you for the help. Noted for the developer moving forward if necessary.

Best,
Amy

[David Martin – Support]

Hi Amy,

No problem happy to help where possible.

Thanks,
David.