Tips and Tricks HQ Support

Support site for Tips and Tricks HQ premium products

  • Home
  • Contact Us
  • Documentation
  • Forum Home
    • Forum
    • Forum Search
    • Forum Login
    • Forum Registration

eStore: customizing the eStore_buy_now_button CSS class

by

Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore Tweaks › eStore: customizing the eStore_buy_now_button CSS class

Tagged: button customization, css, customization, customize eStore button

  • This topic has 5 replies, 4 voices, and was last updated 8 years, 10 months ago by admin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 5, 2011 at 1:23 pm #4691
    Ugo
    Member

    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.

    November 5, 2011 at 11:22 pm #38176
    admin
    Keymaster

    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.

    June 6, 2012 at 1:32 pm #38177
    buysuccess
    Member

    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.

    June 7, 2012 at 12:26 am #38178
    admin
    Keymaster

    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

    May 5, 2014 at 12:39 pm #38179
    margaux
    Member

    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?

    May 6, 2014 at 12:10 am #38180
    admin
    Keymaster

    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
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

Forum Related

  • Forum Home
  • Forum Search
  • Forum Login

Support Related Forms

  • Contact Us
  • Customer Support
  • Request a Plugin Update
  • Request Fresh Download Links

Useful Links

  • Plugin Upgrade Instructions
  • WP eStore Documentation
  • WP eMember Documentation
  • WP Affiliate Platform Documentation
  • WP PDF Stamper Documentation
  • WP Photo Seller Documentation
  • Tips and Tricks HQ Home Page
  • Our Projects

Quick Setup Video Tutorials

  • WP eStore Video Tutorial
  • WP eMember Video Tutorial
  • WP Affiliate Platform Video Tutorial
  • Lightbox Ultimate Video Tutorial
  • WP Photo Seller Video Tutorial

Our Other Plugins

  • WP Express Checkout
  • Stripe Payments Plugin
  • Simple Shopping Cart Plugin
  • Simple Download Monitor

Copyright © 2023 | Tips and Tricks HQ