Loading...

WooCommerce

bootScore has full WooCommerce support with many overwritten Bootstrap templates and an ajax cart. Live Preview

AJAX Cart

The ajax cart is integrated in the theme and adds products to the cart on single product page without reloading. Works fine with:

  • Simple products
  • Grouped products
  • Variable products

Works not with:

  • Affiliate products on single product page

Check AJAX settings in Backend > WooCommerce > Settings > Products tab

  • “Redirect to the cart page after successful addition” must be disabled
  • “Enable AJAX add to cart buttons on archives” must be enabled

Activate WooCommerce

I highly recommend using the bootCommerce child theme instead of changing the code in bootScore. This child-theme already has all settings and files you need to create a shop.

WooCommerce is deactivated by default and uses an own header.php. If you prefer to work on parent theme instead on child, do following steps to activate WooCommerce:

  1. !important install Woocommerce first.
  2. Remove // comment in line 12 in functions.php. Now it will get all the necessary scripts and files from the woocommerce folder.
  3. Rename or delete header.php. Rename header-woocommerce.php into header.php

63 Comments on “WooCommerce”

  • Pascal Müller

    says:

    I have problems with the ajax mini cart. As long as I am adding something directly from the shop page, it is updating correctly. But when I am on a single product page (with product variations) it does not update mini cart most of the time. When I check the actual cart, it is there.
    Example (also with implemented gallery) https://akaritaste.ch/

    • Basti

      says:

      I see… Usually there shouldn’t be any problems and I do not see any errors on your site. But it does not work for simple product in product listening too https://akaritas.myhostpoint.ch/shop/. You will redirected direct to the cart instead of opening tne offcanvas cart.

      I would do following steps to find the bug:

      1. Check ajax in Backend > WooCommerce > Settings > Products tab

      • “Redirect to the cart page after successful addition” must be disabled
      • “Enable AJAX add to cart buttons on archives” must be enabled

      2. Activate parent theme instead of child

      3. Deactivate this plugins

      • woocommerce-additional-variation-images
      • woocommerce-extra-charges-to-payment-gateways
      • woocommerce-all-products-for-subscriptions
      • woocommerce-product-bundles
      • wp-bootstrap-blocks

      If that works, then activate child and plugins step-by-step again.

      • Pascal Müller

        says:

        … thanks for your quick reply!

        1. – ajax activated (and actually works an archive pages)
        – redirection was just activated for testing purpose

        2. – activated your bootcommerce child theme – issue still there
        – activated bootscore parent theme – issue not present, due to the fact that mini cart is not there at all (?)

        3. – you are probably right – gotta have to deactivate those plugins step by step.

        I’ll keep you posted anyway. thanks!

        • Basti

          says:

          👍 See, it works now. I will update the documentation soon to avoid confusion.

          In point 2, you are right, WooCommerce is disabled by default, my mistake.

          Thank you

          • Pascal Müller

            says:

            weird thing about it: it seemed to work without these plugins. but after reactivating each of them it still works… but before it has not.

          • Basti

            says:

            I often experience things that I cannot explain…

  • Mike Collignon

    says:

    Hello !

    I was having a problem with the “my account – offcanvas” feature :
    Clicking would close the panel, which wasn’t good for the “login/sign-up panel” as users could not click to use the input fields.

    Fixed the issue by adding an “a” behind “#offcanvas-user-left” on “woocommerce.js” line 24.

    Hope this helps 😉

    • Basti

      says:

      Hello Mike,

      thank you for reporting and fixing that bug. Updated theme already, you can download latest version in your dashboard.

      However, yesterday Bootstrap v5.0.0-beta3 has arrived and Offcanvas is now a Bootstrap component https://getbootstrap.com/docs/5.0/components/offcanvas/. In the next bootScore release all own coded Offcanvas will be replaced by this. 🙂

      • Mike C

        says:

        Great !
        Thanks for the info 😉

        I stumbled across another issue when trying to rearrange the checkout page in two colums.
        Something kept breaking from “logged in” to “not logged in”.

        Found that the issue came from the “create-account” bit, merging divs together.

        I deleted the 2 on lines 77 and 78 on “form-billing.php”.
        It fixed the issue for me… I tested different senarios and it seems to work fine 🙂

        BTW : I’m loving playing around with your theme to create my own project.
        Love your work !

        • Basti

          says:

          Hello Mike,

          thnks for reporting, you removed the closing div tags, right?
          Can you share a site link that I can check what you have done and understand the issue? That will be very helpful. If you do not want to share public, you can send the link via the contact form.

          Thank you

          • Mike C

            says:

            Message sent 😉
            Thank you !

            • Basti

              says:

              Your checkout looks awesome!

              I see you changed grid in form-checkout.php too. Of course, then there will be an issue in form-billing.php.

              If you want to send me both files to store(at)bootscore.me, I will change the default checkout to your layout, it is much more better and you will have a starting point with less work.

              Thank you

  • Rémi Segura

    says:

    Hi sir,
    I want to edit the product category loop (remove the li tag for each item)

    But when i search in files i see that the file woocommerce.php is displayed and after the part is displayed..

    How can i edit this part i search in all the files i found nothing..

    I make you a video to help you to visualize the problem

    I reealy appreciate the quality of your theme

    https://www.loom.com/share/81305fc0da404eefadf8c9744a7151fc
    BR,
    Rémi Segura

    • Basti

      says:

      Hi Rémi,

      bootScore does not use li for product loop, it uses Bootstrap columns instead. My question: do you use a custom loop, shortcode or plugin? Maybe it is a WooCommerce template file that is not overwritten by the theme.

      Basti

      • Remi Segura

        says:

        Thanks you sir for your answer i mean category loop, is it displayed by a template or by a functions ?
        i let you a screenshot to be the most clear as possible

        https://imgur.com/OizPsOU

        And thanks again for this wonderful theme !!

        • Basti

          says:

          Hello Remi,

          the loop is in 3 files:

          1. bootscore-5/woocommerce/loop/loop-start.php (open row)

          2. bootscore-5/woocommerce/content-product.php (column cards)

          3. bootscore-5/woocommerce/loop/loop-end.php (close row)

          This is the loop when you click the shop link in the menu and you can edit them by placing a copy of them in child (use same folder structure).

          As described in the previous comment, your loop looks different in the screenshot. Are you using a Gutenberg block? So I can’t tell you exactly what you’re looking for if I don’t have a link to your site.

          • Remi Segura

            says:

            I’m using hard code sir no page builder and gutenberg for page post !!

            • Remi Segura

              says:

              I change nothing sir just modify the settings to show categories instead products in the woo commerce customization settings, i search in content-product.php, i don’t find the code who displays theses li items for categories..

              • Basti

                says:

                Hi Remi,

                as I wrote above, I cannot help without having a link to your site to check the code. A screenshot or video is no help.

                  • Basti

                    says:

                    Hello Remi,

                    you are using .row.custom-product.cat-loop classes. This is not the bootScore loop. So, where they are come from?

                    “I change nothing sir just modify the settings to show categories instead products in the woo commerce customization settings” – Please built back for testing

                    Go in Backend to Appereance > Menus > add a Product categories Link. Then you will have a page with bootScore loop.

  • John

    says:

    Hi Basti,
    The stripe warnings about the card fields are not working. If the card number is incorrect it only turns the placeholder red in the inline form. If the expiry date is incorrect it only changes it to red etc. But no messages are shown.

    The woocommerce errors are only showing up after the stripe form’s input is correct.

    So if a customer misses something on the card, they are not shown any errors. They got stuck on the checkout page without any information about what went wrong for them.

    Hope this helps! Your theme is awesome! Thank You!

  • Basti

    says:

    Hi John,

    this has nothing to do with the theme. Stripe uses an iframe to show the form. Validation like the other forms in checkout page will not work that way. It is the same in every theme you use.

    Best regards

    Basti

  • John

    says:

    Hi Basti,

    Before I wrote the comment I’ve tested it with twentytwentyone theme and it showed the error messages. Thats why I’ve messaged to you.

    • Basti

      says:

      Hi John,

      I will check that next week.

    • Basti

      says:

      Hi John,

      it has been fixed. You can download latest version in your dashboard https://bootscore.me/account/downloads/

      Please check: Add a paid product https://bootscore.me/shop/products/plugins/bs-isotope/ to your cart and go to checkout. Choose Credit card as payment and fill out form with a fantasy card number. You will get a feedback if number is invalid.

      As mentioned in previous comment, the whole content is delivered by Stripe and not by WooCommerce. That means that there is no way to change classes to Bootstrap classes. You must style the alert by yourself via CSS like I did on checkout page here.

      Best regards

      Basti

      • John

        says:

        Hi Basti,

        Thank you for your answer. Can you tell me how did you implemented it? I understand that you have to manually style it, but how did you managed to reveal the error? “The card number is incomplete.”

        The div “” is completely empty for me.

        I’m afraid I have modified your theme too much to be able to simply paste in the new version.

        Thank You
        John

        • John

          says:

          I see the comment got sanitized. So the div “stripe-source-errors” is completely empty for me.
          How did you managed to reveal the ul : “woocommerce_error woocommerce-error wc-stripe-error ”

          Thank you!

  • andy nesbitt

    says:

    Hi,

    Is it possible to have woocmmerce products in a grid view or two-column view on mobile as currently, it is only one product per line on category, search pages etc.

    Thanks

    Andy

    • Basti

      says:

      Hello Andy,

      of course, that is possible. Go in parent theme to folder woocommerce and copy file content-product.php. Create folder woocommerce in your child and paste file there. Now this file overrides parent file.

      Open file in editor and change Bootstrap grid classes in line 28. https://getbootstrap.com/docs/5.0/layout/grid/

      For example, add class col-6 to line 28 will show 2 products in one row on phones.

      Basti

  • andy nesbitt

    says:

    Hi

    That’s brilliant, thanks for your help. That’s working for me now 🙂

  • Poth Pancha

    says:

    Hi,
    I want to move the side bar to left in shop page and hide it completely in the product page. I found that editing woocommerce.php, I can move the side bar to left. But not sure that’s the best way to do it.
    Also I couldn’t find a way to hide the side bar in product page. Appreciate if you could provide me a direction.
    Thank you.

    • Basti

      says:

      Hi Poth,

      your way to edit woocommerce.php is correct. Simply add class order-md-last to col in line 29. Sidebar is now on the left on medium devices but below the content on phones.

      For second part, hide the sidebar on product pages is not possible by template modification. Because WooCommerce uses woocommerce.php for all shop pages. But there is is a good and free plugin for that, which is also used here on this site: https://wordpress.org/plugins/widget-context/

      With this you can set sidebar widgets to “Archive of “Products” posts” only. In this case you have exactly the result that you want, sidebar only on shop archive page.

      Does that help?

      Basti

      • Poth Pancha

        says:

        Thanks a lot. This is very helpful. But small correction though. Correct CSS class should be order-md-last. Thanks a lot again.

  • Mouhssine

    says:

    Great job, thank you very much, please, how can I change the number of products on each page, because I want to add pagination, I do it in the normal ways but it does not work

    • Basti

      says:

      Hi Mouhssine,

      go in parent theme’s functions.php to line 308. Copy this snippet to your child theme’s functions.php and change number 24 to how much posts/products you want to show per pagination.

      • Mouhssine

        says:

        thank you very much 🙂

  • Richard Bull

    says:

    Hello! Thank you very much for a great starting point for projects.
    Just a feedback… the words “Close account” at the top of the offcanvas bar could be confused (until you click it of course) with really closing and deleting your account. Maybe better just to say “close”.
    Which leads me to my question.
    To edit this file, i should just copy this file to the child theme right?
    /themes/bootcommerce-5-child/woocommerce/myaccount/my-account-offcanvas.php
    So far my changes are not showing up.
    Do I need to do anything else?

    • Richard Bull

      says:

      I notice that navigation.php is picked up in the child theme overriding the parent theme…
      Is it because my-account-offcanvas.php is not part of woocommerce?
      Could my-account-offcanvas.php use navigation.php and other form elements of woocommerce default files so that changes made to override woocommerce dashboard & navigation are found in the offcanvas navigation?
      many thanks!

      • Basti

        says:

        Hello Richard,

        what you want to do? Changing the close text? This is in header.php. my-account-offcanvas.php is not part of WooCommerce, it‘s an own file and cannot be overwritten. But this file only delivers the content in the offcanvas. In header.php you can do whatever you want.

        Does that help?

    • Basti

      says:

      Hi Lennert,

      your site is in maintenance mode. So, nothing to see there? 😉

      • Lennert Fabriek

        says:

        wauw.. I’m sorry. Back to open now!

        • Basti

          says:

          Add data-smoothscroll="false" to the tab-link. For example <a href="#tab-overige-informatie" data-smoothscroll="false">Overige informatie</a>.

          You can do this with JavaScript too. Please check smooth scroll documentation https://bootscore.me/documentation/smooth-scroll/.

          Smooth scroll script can be found in theme.js, simply remove it for testing. This script will be removed from theme when Safari supports scroll-behavior: smooth;.

          Does that help?

  • Lennert Fabriek

    says:

    Hi Basti,

    Thanks for the quick replies. It works perfectly. I changed the tab link in the tabs.php.

    It didn’t succeed with jquery but it works fine now.

    Thank you so much.

  • Lennert Fabriek

    says:

    Hi Basti,

    My mobile menu isn’t working anymore. Perhaps it is something easy but I don’t see it..

    https://villamila.nl

    • Lennert Fabriek

      says:

      I’m sorry, fixed it!

      • Basti

        says:

        👍However, there are some bugs on your site on mobile view. I recommend to check every change you did on desktop immediately on mobile as well 😉

        • Lennert Fabriek

          says:

          Hi,

          Thanks for your advice. I started yesterday with responsive view. Maybe it’s better to check things immediately (especially theme features).

  • Mikhail Kacherov

    says:

    Hi!
    Thank you very much for your theme.

    I’ve been racking my brain trying to figure out where the mini-cart is edited. First I tried editing the mini-cart.php file, but that gives no results. Then I copied the mini-cart.php file into the child theme bootcommerce-5-child, that also gives no results. I mean I can only see the changes on the site up to in the DOM. Everything inside that div is not updated on the site. I’m sure it’s not the cache, because I’ve disabled it.
    Do you have any ideas?

    • Basti

      says:

      Hi Mikhail,

      yes, that’s tricky but simple. Everything what you did is correct. Mini cart is ajax loaded, simply add or remove a product from cart to see your changes, refreshing the page is not enough 😉

      • Mikhail Kacherov

        says:

        Wow. That helped. Thanks.

        I recommend adding this trick to the documentation.

  • Mikhail Kacherov

    says:

    There’s another problem I can’t solve. How to set the output of 3 products per row instead of 4 on the shop page. The Woocommerce setting “Products per row” in the catalog does not change the value. In addition for some unknown reason on the /shop page it is not possible to select a template (for example, no sidebar). The template selector isn’t available in the editor.

    • Basti

      says:

      WooCommerce uses woocomerce.php for all shop pages. Thats why you cannot select page templates for shop.

      Change col-* classes in content-product.php to set number products per row. See also a previous comment above.

      • Mikhail Kacherov

        says:

        Thank you,
        Now I got how the grid works.
        About the templates. I just saw that you’re using a no-sidebar template on your https://bootscore.me/shop/ But maybe it’s some kind of hack.

        • Basti

          says:

          No, it‘s the default woocommerce.php. There is no sidebar because widgets are hidden on shop pages using https://wordpress.org/plugins/widget-context/ plugin. You can remove sidebar from template as well if you do not want to use plugin. But then sidebar is removed on all shop pages.

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information