• Resolved scottl31

    (@scottl31)


    Hi,

    Instead of Woocommerce products, we use custom posts in which we put the “add to cart” button by placing this code:

    [add_to_cart sku=”book356″ style=”border:0px; padding:0px;” show_price=”false”]

    This works great, and after clicking, a check mark and a “View cart” link appears next to it.

    We sell books, and all have 1, 2 or 3 editions, (hard, soft, ebook). And at the moment, we want to change the page and make the button, price, and edition take up less space.

    Do you know if there’s a way to change the button text for each edition to read Hard cover, Soft cover, or eBook based on the way we are doing it above? Possibly even by adding something in the button code itself?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 23 total)
  • Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    It is possible to conditionally change the button text, but would require some customization / custom code.

    1) Make a custom shortcode with an extra parameter for button text: https://github.com/woocommerce/woocommerce/blob/b8700c51e20b935e5bbb95b00d289d4ced2868ea/includes/class-wc-shortcodes.php#L294

    2) Use this filter to conditionally return different button text based on the product ID: https://github.com/woocommerce/woocommerce/blob/21e51b9fc6a9537366cbd5ca8275ec40eacd8e61/includes/class-wc-product-simple.php#L56

    Thread Starter scottl31

    (@scottl31)

    Hmm.. not exactly sure what to do with that or where to put it.

    Are you saying that it should be as simple as adding a parameter to my shortcode like button_text=”Buy now” or something like that?

    If so, that’s exactly what I want. Any idea how I would do this?

    Thanks!

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    Are you saying that it should be as simple as adding a parameter to my shortcode like button_text=”Buy now” or something like that?

    It could be like that, but to get to that point will require custom development. So you will probably need to hire a developer to implement one of the above two options for you:

    https://jobs.wordpress.net/
    https://codeable.io/
    https://woocommerce.com/experts/

    _____

    Alternatively, what about using a variable product? https://docs.woocommerce.com/document/variable-product/. Could just have a dropdown to select once of the book options.

    Thread Starter scottl31

    (@scottl31)

    Wow, that difficult huh?

    Can’t do anything custom at the moment. What a bummer.

    I wasn’t sure if variable or grouped would be better.

    But is there a way to get the drop down needed with a short code like I am using on my custom post?

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    You can embed the whole product page into a specific page using the [product_page] shortcode.

    I think you’ll find this is fairly difficult to achieve because it’s “going against” the normal flow of how other people use and display products.

    A variable product is definitely what you need, and it would be best to utilize the actual product page.

    Thread Starter scottl31

    (@scottl31)

    Embed the whole product page? Do you mean like in a frame with only the drop down button showing. Seems like a crazy way.

    So there’s no way to get that drop down menu in a short code like I use?

    I know it would be best to use the actual product page, but our design and theme were not woocommerce compatible. We got the design we liked with using the short code above. The product page is completely broken and looks horrible. Actually completely unusable.

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    I meant just place the whole product page area inside of your custom page using the [product_page] shortcodeL https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-10

    Maybe best to find a theme that looks good though.

    Thread Starter scottl31

    (@scottl31)

    Well, placing the product page the way you say will show the page won’t it? We can’t show the page because it is severely malformed and unusable due to the theme being incompatible with WC.

    Finding another theme is not an option at the moment.

    So are you saying I’ve reached a dead end and there is nothing in the existing code that I can do to get my result?

    Thanks.

    Hi @ scottl31,

    So are you saying I’ve reached a dead end and there is nothing in the existing code that I can do to get my result?

    Not really a dead end, maybe a roadblock is a better metaphor? ??

    I think the easiest thing for you to do here would be to NOT use the shortcode, but just use an add to cart LINK to make your own buttons.

    For example, the add to cart shortocde might just give you a nice button with a link to https://yourgroovydomain.com/?add-to-cart=123

    What you can do is just make your own button, and use that add to cart link in the button, and there you go! You can customize the button text to say anything you want ??

    You can even generate a button here:
    https://css3buttongenerator.com/

    Thread Starter scottl31

    (@scottl31)

    I actually thought of doing that link thing, but I didn’t think it would place the check mark and “View cart” link next to it after being clicked like we have now with the short code. Does it do that?

    If not, we don’t want people taken to the cart after clicking, so we need some way to tell the person that the item has been added to the cart. Is there a way with this?

    Thanks!

    Hi @scottl31,

    It does not add the checkmark and View Cart, but it would actually refresh the page and show that it was added to the cart though. Try it out on your site to see how that goes.

    Thread Starter scottl31

    (@scottl31)

    OK, I guess it’s worth trying.

    Do you have a link to the specific instructions for this?

    Only thing is, doesn’t this use the product ID? If so it won’t work. But if it can use the sku, then it will work for us.

    Thanks!

    You would just need to create your own button, and then use the URL as the link for that button:

    https://yourgroovydomain.com/?add-to-cart=123 You would replace 123 with the product ID that you would want to be added to the cart.

    Is there a reason why it might not work if it’s only a Product ID? Variations also will have their own individual IDs:
    https://a.mikey.link/bf4Rtv

    Thread Starter scottl31

    (@scottl31)

    It won’t work with the product ID because there is no product ID when I create the product and the listing.

    All our product and listing data, including the sku, is in a database. We use WP All Import to import that database, which creates the product pages (not visible on site) and the custom post listing with the short code button in place.

    Will this work using the sku?

    My boss is starting to get impatient with me on this. I hope to find a solution soon.

    Semi related side question: Is there a way to change the wording of the system wide “Add to cart” button and the “Read more” button that shows when an item is out of stock?

    Hi @scottl31,

    The add-to-cart will not work with SKUs. I would suggest once you’ve done the import, maybe doing an export so that it has IDs and then creating them that way?

    You can change wording of strings like “Add to cart” using a translation plugin like this one:
    https://www.ads-software.com/plugins/loco-translate/

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Custom Post “Add to cart” Buttons editing’ is closed to new replies.