eStore: customizing the eStore_buy_now_button CSS class

[Ugo]

Hallo developers,

I just found out that the following lines in wp_eStore_style.css :

.eStore_paypal_checkout_button,.eStore_button,.eStore_remove_item_button,.eStore_empty_cart_button,.eStore_buy_now_button,.eStore_subscribe_button,.download_now_button_submit,.eStore_sold_out {

width: auto !important;/*override the eStore button width to auto to prevent them from looking weird on some themes */

}

.eStore_paypal_checkout_button:hover,.eStore_button:hover,.eStore_remove_item_button:hover,.eStore_empty_cart_button:hover,.eStore_buy_now_button:hover,.eStore_subscribe_button:hover {

opacity:0.7;

}

can create a problem when trying to customize the look of the BUY NOW button in wp_eStore_custom_style.css

If possible, I suggest the following changes for the next version:

1) remove the .eStore_buy_now_button class in the above statements, example:

.eStore_paypal_checkout_button,.eStore_button,.eStore_remove_item_button,.eStore_empty_cart_button,.eStore_subscribe_button,.download_now_button_submit,.eStore_sold_out {

width: auto !important;/*override the eStore button width to auto to prevent them from looking weird on some themes */

}

.eStore_paypal_checkout_button:hover,.eStore_button:hover,.eStore_remove_item_button:hover,.eStore_empty_cart_button:hover,.eStore_subscribe_button:hover {

opacity:0.7;

}

2) add the removed commands to the wp_eStore_custom_style.css:

.eStore_buy_now_button {

width: auto !important;

opacity:0.7;

}

3) rename the wp_eStore_custom_style.css to wp_eStore_custom_style.css.txt so that, after having followed the instruction to upgrade the plugin, users will not loose any customizations.

4) amend the instructions for customization so that users will know they need to rename wp_eStore_custom_style.css.txt if they want to customize the style.

[admin]

You maybe misunderstanding how CSS works. You don’t need to change anything in the plugin for you to override the CSS. Simply add your CSS in custom CSS file and it will override the other one (the custom CSS file is loaded after the main eStore CSS file so the custom one will take priority).

For example add the following to the custom CSS file to make the button width 300px and remove the opacity:

.eStore_buy_now_button {

width: 300px !important;

opacity:1 !important;

}

When you upgrade the plugin simply take a backup of the custom CSS file and then re upload the file after the update. Let me know if that makes sense.

[buysuccess]

By default my Buy Now button images were displaying much smaller than I expected them to.

I plan to use multiple different styles of Buy Now Buttons.. some may vary in size so I added the following to my css file to overwrite what ever the existing code was and this seemed to solve my issue.

.eStore_buy_now_button {

width:auto !important;

height:auto !important;

opacity:1 !important;

border:0px !important;

}

However, I would prefer to attach a CSS class to each individual button instead. I don’t happen to see a place to do that yet… But this looks like it will work for me for now.

[admin]

You could also use different images (they can be of different sizes) for your buttons.

https://support.tipsandtricks-hq.com/forums/topic/wp-estore-customizing-the-buttons-changing-the-button-images

[margaux]

Hello there,

I would like to customize the [wp_eStore_buy_now_button id= xx]. I have uploaded a customize button but I would like to remove the text displayed above the button. How can I do that?

[admin]

When you use a custom button image for your button, it will only show that image. Not sure why you have the text in there too. Can you share a link to the page where you have used that buy now button shortcode so I can check it?

[Author]

Posts