Shop Page Button Styling

This topic has 13 replies, 4 voices, and was last updated 6 years, 10 months ago by Artem Temos.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
March 24, 2018 at 5:45 pm #48500

tekhnologica
Participant

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.

March 24, 2018 at 7:54 pm #48525

Elise Noromit
Member

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

March 24, 2018 at 9:51 pm #48551

tekhnologica
Participant

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.

March 25, 2018 at 10:01 am #48592
Elise Noromit
Member
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
March 25, 2018 at 12:25 pm #48642

tekhnologica
Participant

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.

March 25, 2018 at 2:29 pm #48672
Elise Noromit
Member
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
March 25, 2018 at 2:49 pm #48673

tekhnologica
Participant

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.

March 25, 2018 at 4:00 pm #48688
Elise Noromit
Member
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
March 25, 2018 at 4:51 pm #48702

tekhnologica
Participant

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.

March 25, 2018 at 7:13 pm #48757

Elise Noromit
Member

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

March 25, 2018 at 7:56 pm #48765

tekhnologica
Participant

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.

March 26, 2018 at 8:08 am #48816
Bogdan Donovan
Keymaster
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
March 26, 2018 at 1:10 pm #48905

tekhnologica
Participant

Fantastic! Thanks so much for the help.

March 26, 2018 at 1:35 pm #48920

Artem Temos
Keymaster

You are welcome!
Author

Posts