Return to previous page

Single Product Page – "Clear" Function Reposition

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

George

Participant

December 30, 2016 at 16:53

1.) While testing my Single Product Page on the Storefront Theme as you had suggested for another problem, I noticed they had what I consider a proper positioning and display of the “Clear” function which shows on xStore under the “Choose an Option” button for selecting variable attributes and on the Storefront Theme it shows just to the right hand side of the box along with a small icon.

Please let me know how to re-position the “Clear” button. Move it from underneath the CHOOSE AN OPTION BOX to the right hand side and put to the left of the word “Clear” the circular arrows showing down and up just like on the Storefront Theme. This has to be possible since it keeps the functionality but just moves it. This change becomes intuitive and the word Clear no longer confuses customers when a product attribute could also be clear. The change also frees up more vertical space when a customer makes a selection. Finally it looks better.

2.)

How can I remove on the Single Product Page the price range displayed right above the “Choose an Option” box. Would like to still see it on the Shop Page but just remove it here. Is that possible?

Thanks.

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

8 Answers

George

Participant

December 30, 2016 at 17:29

Forgot on my request #2, that when I remove the range pricing on the Single Product Page I would also like to adjust the Font Size on the price that is reflected on variable products after selection be the same font size as the range price.

#150614 Copied
8theme

Support staff

January 3, 2017 at 08:23
Hello,

1. Please, add the following code to the custom CSS to make this button be next to the dropdown
```
.product-information table.variations {
	width:100%;
}

.product-information table.variations td.value select{
	width:70%!important;
}

.reset_variations {
	margin-left:10px;
	display:inline-block;
	top:7px;
	position:relative;
}
```
Regards
#150698 Copied
George

Participant

January 4, 2017 at 16:04

Unfortunately the code you provided did not work. It dod not move the “clear” function on the vingle product page (for variable products) below the “select an option” button and move it to the right side of the button. Ideally it would be nice to add the same 2 arrows in a circle icon (same one that is used on the Storefront Wp Woo Commerce Theme.

#150858 Copied
8theme

Support staff

January 5, 2017 at 08:28
Sorry, add this line to the select styles also
```
.product-information table.variations td.value select{
	float:left;
}
```
Regards
#150906 Copied
George

Participant

January 10, 2017 at 16:45

1.) It works, although there are some “ghost” effects that if I have a variable product with a default item showing price, the “clear” name is still under the Choose an Option box? Anyway to fix this wrinkle in the process?

2.) Also I see on the Storefront Theme, the word “Clear” shows up on the single product page as an icon with 2 arrows bended into a circle, one points up and one points down. Is this changeable on xStore? This is actually much better than having a word.

Thanks.

#151437 Copied
8theme

Support staff

January 11, 2017 at 08:38
Hello,

1. Try to add this additional code also
```
form.variations_form.cart {
    min-width: 300px;
}
```
2. Thank you for the idea. We will consider adding such icon to the “Clear” button in the future.

Regards
#151491 Copied
George

Participant

January 11, 2017 at 16:41

Thanks! Your last css code seems to have finally fixed the problems of where the clear button was showing up. Appreciate the help.

#151598 Copied

8theme

Support staff

January 11, 2017 at 16:59

Great, you are welcome!

#151604 Copied
Viewing 9 results - 1 through 9 (of 9 total)