Single Product Page – "Clear" Function Reposition

8 replies2 participantsUpdated by 8theme

  • Avatar: georcarson
    George
    Participant

    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

    Avatar: georcarson
    George
    Participant

    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
    Avatar: 8theme
    8theme
    Support staff

    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
    Avatar: georcarson
    George
    Participant

    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
    Avatar: 8theme
    8theme
    Support staff

    Sorry, add this line to the select styles also

    .product-information table.variations td.value select{
	float:left;
}

    Regards

    #150906 Copied
    Avatar: georcarson
    George
    Participant

    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
    Avatar: 8theme
    8theme
    Support staff

    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
    Avatar: georcarson
    George
    Participant

    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
    Avatar: 8theme
    8theme
    Support staff

    Great, you are welcome!

    #151604 Copied

You must be logged in to reply to this topic.Log in/Sign up