Adding WooCommerce support to b4st - SimonPadbury/b4st GitHub Wiki

WooCommerce is an eCommerce platform plugin for WordPress, developed by Automattic – the team behind WordPress.

To use WooCommerce on any WordPress website, you need:

1. The WooCommerce plugin and

2. A WordPress theme that supports WooCommerce.

WooCommerce-supporting WordPress themes range from the simple to the complex. A simple WooCommerce theme has the minimum required additions to enable it to support WooCommerce – and it uses the WooCommerce plugins's own front-end CSS to supply the styles required for the WooCommerce modules to be displayed correctly on the website.

The WooCommerce plugin's front-end styles (currently, in 2018 at least) have minimal flat design – very similar to Bootstrap 4. Therefore they will fit in well as part of any website that it built upon Bootstrap 4. And that includes websites built upon b4st.

Follow the steps in this wiki to add the minimum required for WooCommerce support to b4st. For more information, go to the WooCommerce docs (wiki on GitHub).

You can, alternatively, add this WooCommerce support to a b4st child theme. There's a tutorial for that, at https://github.com/SimonPadbury/b4st/wiki/Adding-WooCommerce-support-to-a-b4st-child-theme.

In the dashboard of your (test or development) WordPress website, go to Plugins and click the Add New button. Then you can search to find the WooCommerce plugin. Install this plugin and Activate it.

If you need some example products:

During the WooCommerce plugin installation, you will see an option to install the Storefront theme (a WooCommerce example theme) plus some example products. Do that, so that you can get the sample products – but then switch back to using the b4st theme.

Go to Appearance/Menus, and you will see a few new Pages that have been created by the WooCommerce plugin.

• Store (US) / Shop (UK)

• Cart

• Checkout

• My account

Add these to your navbar.

At the bare minimum, your theme needs add_theme_support( 'woocommerce' ); added somewhere in the functions file(s).

I prefer to create a new, dedicated function file in the functions/ folder called b4st-woocommerce.php and then require it on b4st's functions.php:

require get_template_directory() . '/functions/b4st-woocommerce.php';

This is my example function and action hook in b4st-woocommerce.php:

<?php
/**
 * WooCommerce Support
 */

function b4st_add_woocommerce_support() {
  add_theme_support( 'woocommerce', array(
    'thumbnail_image_width' => 150,
    'single_image_width'    => 300,

    'product_grid'          => array(
      'default_rows'      => 3,
      'min_rows'          => 2,
      'max_rows'          => 8,
      'default_columns'   => 4,
      'min_columns'       => 2,
      'max_columns'       => 4,
    ),
  ) );
}
add_action( 'after_setup_theme', 'b4st_add_woocommerce_support' );

Note: while you are editing this file, you will need to switch to another WordPress theme and then back again to b4st, in order for this function to be used after theme setup.

See the WooCommerce Docs' Declaring WooCommerce support in themes for more information.

There must be (at least) one template in your theme that is dedicated to WooCommerce pages.

Create a new file in your theme root directory and save it as woocommerce.php.

Then copy the content of the page.php template into it, delete (the link to) the page loop, and replace it with the WooCommerce hook, <?php woocommerce_content(); ?>.

I like to have WooCommerce templates full-width, so I also remove the sidebar. So my simple woocommerce.php has only this in it:

<?php get_header(); ?>

<div class="container-responsive mt-5">
  <div id="content" role="main">

    <?php woocommerce_content(); ?>

  </div><!-- /#content -->
</div><!-- /.container-responsive -->

<?php get_footer(); ?>

Note: .container-responsive is a class that I have added to theme/css/b4st.css. It is a container wrapper similar to Bootstrap's .container except that it does not have set widths at the various Bootstrap media query widths. It maxes out at 1140px, same as the Bootstrap container.)

You are at liberty to do what you want in your own design.

The WooCommerce plugin inserts modules on some pages (Checkout and My Account) that use a two column layout with column classes .col-1 and .col-2 – and the plugin's own front-end CSS styles these two half-width columns.

Bootstrap, however, also uses these same class names .col-1 and .col-2 for its grid layout, but for column widths 1-twelth and 2-twelths.

Since the WooCommerce plugin stylesheets are linked earlier in the webpage <head> than the b4st Bootstrap stylesheet, this means that the Bootstrap styles overrides the WooCommerce for these classes, and that messes up the layout.

There is an easy CSS fix. Just add this to your stylesheet e.g. to theme/css/b4st.css:

.woocommerce .col-1,
.woocommerce .col-2 {
  max-width: none;
}

That’s all you need for a basic setup for WooCommerce support in b4st. You’re good to go.

By default, WordPress is set to display the blog index as your homepage. You can change that in Settings/Reading.

But first, if your blog index is not to be your Homepage, then you need to create a menu link so that your visitors can still get to your blog (assuming that you have a blog). Here's how you do that:

1. Start a new Page and give it a title (E.g. Blog). Leave the content empty – it's not going to be used – and then Publish this empty page.

2. In Appearance/Menus and add this (e.g. Blog) page to your navbar menu.

3. Now go to Settings/Reading and in the section "Your homepage displays", move the radiobox selector dot to "A static page (select below):". Now, in the two dropdowns, select:

• Homepage: your Store (US) / Shop (UK)

• Posts: your (e.g. Blog) page

Click the Save changes button, and then go to the front and of your website and refresh your browser.

Many e-commerce websites display a shopping cart icon with the number of items in the visitor's cart (this module also linking to the cart page). This is usually placed in a top corner of web pages. You can do the same, by adding the following code wherever you want.

For example, paste this shopping cart status module within your navbar, after your Walker Menu (and after your navbar’s inline search form, if you have one). Or you could put it elsewhere in the header or in some other place(s).

<div class="mx-2">
<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

  $cart_contents_count = WC()->cart->cart_contents_count;

  ?>
  <a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">

    <?php /* if ( $cart_contents_count > 0 ) { */ ?>
      <i class="fas fa-shopping-cart"></i>
      <?php echo esc_html( $cart_contents_count ); ?>
    <?php /* } */ ?>
  </a>
<?php } ?>
</div>

The above code will add a shipping cart icon, the cart status (number of items), and it will link to the cart page. But that is not enough – because the cart status will only update on page (re)load. You will need the number of items to update every time a visitor adds or removes items from the cart. Therefore, add the following also to your functions, in b4st-woocommerce.php:

/**
 * Update navbar mini-cart (not only when page is refreshed)
 */

function b4st_add_to_cart_fragments( $fragments ) {
 
  ob_start();
  $cart_contents_count = WC()->cart->cart_contents_count;
  ?>
  <a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">

    <?php /* if ( $cart_contents_count > 0 ) { */ ?>
      <i class="fas fa-shopping-cart"></i>
      <?php echo esc_html( $cart_contents_count ); ?>
    <?php /* } */ ?>
    
  </a>
  <?php 
  $fragments['a.cart-contents'] = ob_get_clean();
  return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'b4st_add_to_cart_fragments' );

The code above is based on https://isabelcastillo.com/woocommerce-cart-icon-count-theme-header.