Shop Page Button Styling

I’d like to change the default behavior of how all buttons are displayed with a product in the shop page. The styling is nice if only the default “add to cart” button exists, but if other custom buttons are added, the styling starts to get weird. For instance, I added a custom button to out of stock products, and that button appeared right next to the “read more” button, which didn’t look very appealing. Additionally, the “add to cart animation” triggered on hovering over the button (the one where if you hover over the add-to-cart button the text slides up and is replaced by the cart icon), and I don’t want this to be a default behavior. So, my two questions are:

1) How can I change the styling so that adding extra button options to a product looks nice in a list view (not side-by-side)?
2) How can I disable the “add to cart animation” triggered on hovering over a button?

I’ve included two images to highlight the issues. Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Have you tried to switch different options in Theme Settings > Shop > Product and Category styles > Hover on the product as shown here http://prntscr.com/ivuy6f

Please if the issue has not been resolved after changing hover mode, send us your credentials.

Best Regards

Hi,

Yes, I did try with different styles and each time the output still looked weird… if an extra button is added to be displayed with a product in shopping results, the extra button gets smooshed together with the “add to cart” button. To be clear, the extra button is added via a plugin, but I think the styling could be changed to make this work. I’d like this to work with the “Standard Button” hover style.

Hello,

Try this CSS code to add to Theme Settings to Custom CSS area.

.quick_buy_container{
	background-color: #83b735;
	margin:10px auto;
	padding: 10px;
	text-align:center;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
	    display: block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
	    font-size: 12px;
    line-height: 18px;
	max-width:110px;
}
.quick_buy_container a:hover,
.quick_buy_container a{
	color:#ffffff;
}
.xoo-wl-btn{
	display:block!important;
	max-width:130px;
	padding: 10px 0!important;
	margin:10px auto!important;
	 font-size: 12px;
}

Best Regards

That looks so much better!

Okay, now that the buttons are lined up correctly on the products, the next question I have is how can I style them so that they all appear in the same style as the “read more” (normally “add to cart” when in stock) button? I’d like them to all be white bordered and see-through. Please see photo #1, specifically the “Buy Now” button should be changed to be the same as the others.

Also, how do I stop the cart icon animation from playing on a button? When the “Join Waitlist” button is hovered over, the cart icon animation occurs. Please see Photo #2.

Attachments:

You must be logged in to view attached files.

Hello,

Try replacing the previous CSS code with this one:

.quick_buy_container{
	background-color: transpaent;
	margin:10px auto;
	padding: 10px;
	text-align:center;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
	    display: block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
	    font-size: 12px;
    line-height: 18px;
	max-width:110px;
border: 2px solid #ffffff;
}

Best Regards

Much better!

What about the shopping cart icon animation happening on the “Join Waitlist” button? Is there a way to disable that?

Attachments:

You must be logged in to view attached files.

Hello,

Try this CSS code to add to Theme Settings to Custom CSS area.

.woodmart-hover-button .hover-mask .xoo-wl-btn:before {
    content:none;
}

Best Regards

Wonderful. Thanks so much.

Now how can I change the styling to make buttons in the “select options” display box for a shop result look the same as the “Add to Cart” button? Please see the attached photo.

Attachments:

You must be logged in to view attached files.

Hello,

When I hover the product I see this and cannot catch the button on your screen http://prntscr.com/iw7w8f

What step by step actions should I take to reproduce the issue and see the button to customize?

Best Regards

If you go to here:

https://staging.holofoiled.com/product-category/pokemon/pokemon_tcg/pokemon_sun_and_moon/pokemon_ultra_prism

Click “select options” for the first product that displays, then choose “Lightly Played” in the variation dropdown.

Hi,

At first, you need to remove this custom code https://prnt.sc/iwf4hy

And then add the code snippet located below to the Custom CSS area in Theme Settings.

body .quick-shop-wrapper .quick-shop-form {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

body .quick-shop-wrapper .variations_form,
body .quick-shop-form > div {
   -webkit-box-flex: 1;
       -ms-flex: 1 1 100%;
           flex: 1 1 100%;
   max-width: 100%;
   width: 100%;
}

body .quick-shop-wrapper .quick-shop-form {
	padding: 0;
}

body .woocommerce-variation-description {
	padding-left: 10px;
	padding-right: 10px;
}

.quick-shop-wrapper .xoo-wl-btn {
		max-width: 100%;
		margin: 0 !important;
}

.quick-shop-wrapper .quick_buy_container {
	margin: 0;
	border: none;
	padding: 0;
	max-width: 100%;
  width: 100%;
}

.quick-shop-wrapper .quick_buy_button {
	width: 100%;
}

.quick-shop-wrapper .quick_buy_button,
.quick-shop-wrapper .xoo-wl-btn {
	position: relative;
	top: -1px;
  background-color: #83b735;
	color: white;
	font-size: 13px;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow 0s ease,opacity .25s ease;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow 0s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow 0s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow 0s ease,opacity .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow 0s ease,opacity .25s ease,-webkit-box-shadow 0s ease;
}

.quick-shop-wrapper .quick_buy_button:hover,
.quick-shop-wrapper .xoo-wl-btn:hover {
		color: white;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}

.quick-shop-wrapper .quick_buy_button:active,
.quick-shop-wrapper .xoo-wl-btn:active {
	top: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

Regards

Fantastic! Thanks so much for the help.

You are welcome!

[Author]

Posts