WooCommerce

Note about WordPress 5.0:
Our themes are compatible with WordPress 5.0. However not all functionality are guaranteed to work as expected with the new editor (Gutenberg) that comes with 5.0.

We highly recommend installing the Classic Editor plugin, which will bring back the usual editor if you run into any issue or just do not like the new editor.

An update to bring full compatibility with Gutenberg is being worked on, but has been postponed because of the recent fast-paced evolution of the Gutenberg project until WP 5.0 release. More info about the release of WordPress 5.0 announced on a short 2-days notice can be found here: New 5.0 Target Date.

WooCommerce

This topic contains 27 replies, has 2 voices, and was last updated by  Cheyenne 23 hours, 47 minutes ago.

Viewing 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #24240
    Reply to: WooCommerce

    Cheyenne
    Participant

    Squee! Thanks so much! I’ve implemented these fixes and now just about everything looks and is working properly.

    I have a few minor things to still change with a bit of my own CSS but I can get that done myself. After that it’s just a matter of finishing off product descriptions and tweaking a few more plugins!

    Thanks so much for all this help! You have some beers waiting for you. ๐Ÿ™‚

    #24242
    Reply to: WooCommerce

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Wow thanks! Glad we could get everything sorted with this update, and I’m looking forward to seeing your shop going live! Let me know if you need help with anything, be it a glitch in the theme or a customisation you are having trouble with.

    #24304
    Reply to: WooCommerce

    Cheyenne
    Participant

    Hi Iceable,

    Yes, it’s me, I’m back with more..!

    One of my customers wanted to place an order and agreed to do it through my (still not yet fully complete) WooCommerce shop to help me test it out. Very kind of her! Everything went pretty smoothly except for one major thing.

    My customer complained bitterly about the layout of the Checkout page. She bemoaned the multi-column layout as creating an awful user experience because the columns make the width of the input fields so narrow. She happens to have a long name, long address, etc so not being able to see the bulk of what she had typed bothered her a lot. The screenshots she sent me also led me to believe she may have some vision challenges as everything looked about 2x the size as compared to what I see (ie, she might have her browser zoomed in).

    I can understand her perspective, especially if she has eyesight issues. A customer wants to ensure their billing and shipping info is entered correctly so they won’t have problems with their order. Text fields that don’t have a lot of width won’t engender confidence if customers can’t easily see at a glance what they typed.

    She said her preference would be to have the billing fields occupy a block that spans the full width of the page at the top, then the optional shipping address fields would be a new expandable block below that which likewise occupies the full width of the page, and then finally the cart totals and payment info would be another new full-width block at the bottom.

    Can anything be done about the layout? I have no idea if this is a parent theme thing or a WooCommerce thing or both. If needed can this page be child themed to make the layout different?

    Thanks so much!

    #24305
    Reply to: WooCommerce

    Cheyenne
    Participant

    Sorry, there was something else she mentioned!

    When my customer clicked to submit the order (via Stripe), she said:

    Ok, so i click on complete purchase or whatever the button says, and nothing happens. Well, to me nothing happens. There’s no indication that a page is loading or it’s been submitted. I scrolled up and there was a dark gray circle with the white circle going around inside it next to the “Your Order” at the very top of the page.
    If I don’t see anything happening, I (and many idiots like me) have a lousy habit of clicking the button again. And again. Or refreshing the page.
    So maybe a note that says please wait, or put the ball thingy next to the button? Or gray out the button once it’s been clicked?

    Is there any way to move (or duplicate) the loading icon down near the submission button? If she has her browser zoomed in I can see how the icon at the top of the page wouldn’t be immediately visible to her, leading to the thought that nothing is happening. She’s probably not the only person this will happen to whether or not the browser is zoomed in.

    Thanks!

    #24308
    Reply to: WooCommerce

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi Cheyenne,

    Making the whole checkout form just one column (as it is already on mobile) should be pretty easy with a few lines of custom CSS.

    It would help if I could access the checkout page on your site so I can give you css that is adapted to your (already customized) site. Could you maybe recreate a temporary login?

    #24311
    Reply to: WooCommerce

    Cheyenne
    Participant
    This reply has been marked as private.
    #24317
    Reply to: WooCommerce

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Okay so this will make the 2 columns of “billing details” take all the the width, with the order recap and payment below (as opposed to everything side by side in 4 columns):

    .woocommerce .checkout .col2-set {
        width: 100%;
        float: none;
    }
    
    .woocommerce .checkout #order_review,
    .woocommerce .checkout #order_review_heading {
        width: 100%;
        float: none;
    }

    If you want to go even further and make the billing details section all full width (instead of 2 columns), also add this:

    .woocommerce .checkout .col-1,
    .woocommerce .checkout .col-2 {
        float: none;
        width: 100%;
    }

    About the stripe loading thing however, I’m not sure much can be done. This is basically how the stripe integration is made in woocommerce: while processing, it greys out the checkout form and shows this circle loader thingy (that is meant to indicate that things are processing pretty clear) if I remember correctly. Not 100% sure though, I’ll have to test it to see exactly what happens again, and see if anything can be changed with just css.

    #24319
    Reply to: WooCommerce

    Cheyenne
    Participant

    Ah, much better! Thank you very much. I used just the first option (each rule required the !important declaration to work).

    After implementing this, the “Your Order” area looked strange shoved over to the right so I was able to make it stretch the whole width too.

    Thanks also for looking into the Stripe loading thing. It seems odd that it doesn’t already disable the “Place Order” buttonโ€”unless it does but it doesn’t look disabled because my buttons are not using the default WooCommerce colors?? In any case, anything you can find out about that is appreciated!

    #24322
    Reply to: WooCommerce

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    My bad, I failed copy/pasting my whole code and missed the part that makes the “your order” part full width below (and not on the right). Glad you could get this part sorted ๐Ÿ™‚

    About stripe, this sound odd: I did run a quick test on your site with stripe’s test card (4242 4242 4242 4242) and the whole checkout section turned grey after I hit “place order”.

    #24330
    Reply to: WooCommerce

    Cheyenne
    Participant

    Interesting. I wonder if my customer’s browser interfered with that somehow if she has accessibility stuff running, or she just couldn’t see the change to grey? Thanks for checking into it for me!

    I seem to have found something else. The shop is live now so I can finally start designating products in the “Upsell” and “Cross-sells” fields under the “Linked Products” section of the Product Data area.

    https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/
    This page indicates that:

    • Upsells are supposed to appear on single product pages under a “You may also like…” header but after designating upsells nothing appears for me.
    • Cross-sells appear on the cart page. This does happen which is fantastic…but they also appear on single product pages under a “Related Products” heading. This wouldn’t be a problem except for what I’m going to describe below…
    • Related Products are supposed to show up automatically on single product pages. There were no related products displaying the way the documentation shows until I actually designated some as cross-sells.

    Is the documentation out of date or…? It seems that Cross-sells is doing two jobs instead of just one. It would be nice if related products would show up by themselves the way the documentation indicates. Over time it will become a major pain to edit every single listing every time I add something new to a product category.

    I had specific ideas for what I wanted to use Upsells and Cross-sells for (separate from Related Products) but the way things are at the moment I won’t be able to implement them. ๐Ÿ™

    #24332
    Reply to: WooCommerce

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hm that doesn’t sound quite right indeed.
    I’m going to run a few tests and see exactly what happens, to see if it either a misunderstanding or another part of that WC updated recently which have been overlooked in the theme.

    #24337
    Reply to: WooCommerce

    Cheyenne
    Participant

    So… This has mysteriously started working on its own. But WooCommerce has had a number of updates recently. Maybe it was a bug that got patched?

    • This reply was modified 1 day, 4 hours ago by  Cheyenne.
    #24339
    Reply to: WooCommerce

    Cheyenne
    Participant

    I have spent my day making some more changes in my shop and adding some more products. I became interested in customizing the shop archive page, such as displaying featured products, the product categories, etc rather than just one huge grid of individual products.

    I don’t want yet another plugin (I have too many already!) so went to do the changes via my child theme so I could make use of the built-in WooCommerce shortcodes. It didn’t work. ๐Ÿ™ I then read on this WooCommerce documentation page (at the very bottom) that trying to override archive-product.php doesn’t work if the installed theme is using another file called woocommerce.php (which Blackoot does use).

    Do you know of any way to work around this with a child theme? Thanks!

Viewing 13 posts - 16 through 28 (of 28 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe