Customize purchase button

Hi there,

Sorry for the delay here.

It actually looks like you may have discovered a bug. When adding the purchase link shortcode to your content and selecting that it is just a text link, it should put out similar HTML to the default purchase buttons that EDD automatically puts out. What appears to be happening is that the purchase link shortcode is not outputting the plain class for text link buttons, though. That’s why your CSS works for the buttons EDD automatically puts out, but doesn’t for your purchase link shortcode.

We’ll have to fix that on our end. For now, though, the following CSS, tweaked for efficiency from what you’ve provided, should do the trick for you:

.edd-add-to-cart.plain,
.entry-content .edd-add-to-cart,
.edd-go-to-checkout.plain,
.entry-content .edd-go-to-checkout {
    background-color: #564865;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

Please give that a try and let me know. Meanwhile, I’ll log an issue to get the bug taken care of.

I tried that code.

So what is happening is when I first load the page, I can see two buttons: one that now has the correct background color but the text color is pink and the button is small–not the size I made it, and then the one following my CSS right next to it. So I do see a fully correct version of my button at first. However, within a few seconds, the one built with my code disappears, and then there is just the button that only follows the background color of the code.

Please link me to a page where I can see the buttons as you describe them. I should be able to make tweaks to the CSS.

The two buttons only appear for a split second. I scrolled down to where they were and refreshed the page, so I could use print screen to capture it.

This is the image. The button on the right is what I want, but like I said it only appears for a split second, and then it is gone, and all that is left is the one on the left.

https://beaconpointservices.org/wp-content/uploads/2018/09/2-buttons.jpg

This is the page, but you will just see the incorrect button unless you scroll to the area with the buttons, and then click refresh. When you do that, you will see the two buttons side by side for a split second.

https://beaconpointservices.org/editors-tracking-programs/

No worries. There are browser tools that allow me to see the issue without a refresh.

It actually looks like you have other CSS in the way that’s causing an issue. Line 976 of your style.css file located here: view-source:https://beaconpointservices.org/wp-content/themes/bp/style.css?ver=4.9.8 That file appears to be in the root of a theme with a folder called “bp”.

The CSS rule located on that line (976) looks to (I can only take an educated guess) apply to all links :not() specified there. It appears to be intentionally excluding elements that are included in your theme, perhaps? In other words, that CSS rule does not intentionally exclude EDD buttons (or any other buttons for that matter), so the CSS written there applies to EDD’s buttons… interfering with the changes you’re trying to make.

Here’s a screenshot of what it looks like when I disable the CSS targeted by line 976: https://cl.ly/5cfb18b99b2b

I’m not sure if that CSS is custom, or if it came in the theme you’re using, so written by someone else. But the act of using :not() in the CSS selector to exclude certain types of links, as opposed to writing CSS that targets the links you actually want to target, can always lead to unexpected results like this. Because you have no way of predicting what HTML elements will be introduced in the future by other plugins, or even WordPress itself.

—–

Here’s what you can do, though, to solve the issue in just a couple of steps:

Step 1

On that same line 976 in the CSS file, change this:

a:not([title="1"]):not([title="2"]):not([title="3"]):not([title="4"]):not([title="5"]):not(.btn):not(.nav-link):not(.navbar-brand):not(.ab-item):not(.no-style):not(.dropdown-item):not(.elementor-button-link):not(.nc_tweet)

To this:

a:not([title="1"]):not([title="2"]):not([title="3"]):not([title="4"]):not([title="5"]):not(.btn):not(.nav-link):not(.navbar-brand):not(.ab-item):not(.no-style):not(.dropdown-item):not(.elementor-button-link):not(.nc_tweet):not(.edd-add-to-cart):not(.edd_go_to_checkout)

(all I did was add :not(.edd-add-to-cart):not(.edd_go_to_checkout) to the end of the selector)

Step 2

Replace that entire chunk of CSS I gave you earlier with this:

.edd-add-to-cart.plain,
.entry-content .edd-add-to-cart,
.edd-go-to-checkout.plain,
.entry-content .edd_go_to_checkout {
    background-color: #564865;
    border: none;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

(all I did was change .edd-go-to-checkout to .edd_go_to_checkout … my mistake)

That should have everything looking the way you want and functioning as expected, as it transitions from an Add to Cart button to a Checkout button. I tried to use my browser to check but it appears your site started experiencing an error while I was trying to use the browser tools.

Please give it a test and let me know.

I went in to test it, but I can’t access my Word Press site at all–I can’t get into anything, let alone the CSS file.

I went to my WordPress login for my site, and it said error establishing a database connection.

Thanks for your help. I am sure your new code will work once I can test it.

Talking with my host now to see why my website itself is down and why I can’t get into my WordPress admin at all.

• This reply was modified 6 years, 2 months ago by dsrt16.

Oh man…it isn’t just my WordPress login. My website itself gives that error. So now no one can see my website, it just says error establishing a database connection.

This has never happened before.

No, browser tools have no affect on the actual site. My browser doesn’t have access to your site itself, only the elements that can be seen on the screen. I can manipulate them in my view. A page refresh on my end erases all of my temporary changes.

You can right click right now on this very screen, click the option related to the word “Inspect” or “Inspector”, and see the HTML and CSS that makes up the page you’re viewing. It’s just a browser tool to see how a page is structured, styled, and other things. Developers use it to see how changes will look before actually making them on the real site.

I’m not sure what happened to your site, but it sounds like something is going wrong at the server level. Your site depends on a database to pull data from, and your database connection is failing.

Contact your host immediately and report the issue. They should be able to track it down in seconds.

Got it. I am on it, talking with my host now.

Thanks for your help! Yeah I have used “inspect” before. Fun tool ??

Got my site back up, and I tested your code. It works! Thanks!

Outstanding. We’re here if you run into anymore issues.

Hello, I am am having similar problems. I switched to your plugin from another which had trouble with mail and am generally quite happy with your EDD plugin.

The only real issue I have is the spacing around the button. Looked at the CSS and have tried some different things, would you make a suggestion how to shrink it?

The one under the text block is the one I am referring too.