An ecommerce store created with WordPress and WooCommerce. A very lean build using the free Neve theme with additional functions and styles supplied via a child theme.
The aim of the project was to provide a fully functional ecommerce site on a shoe string budget including domain name, hosting and quick responsive website for selling imported traditional confectionary from Argentina to UK residents.
Built for cost efficiency
The Neve theme by Theme Isle comes with lots of great features out of the box. If you are on a budget you can get a long way with this theme for nothing, adding a few choice customisations and free plugins really achieves a solid looking and usable online shop.
Child theme
Neve has good documentation and helpfully they supply a child theme template to get you started on customisation of your own.
Added Customisations
All the extra functions for this build were added to the functions.php file in the root folder of the child theme.
WooCommerce function – Quantities next to cart buttons on shop page
On the shop page simple products show an add to cart button, but this only adds one item per press of the button, the client requested for there to be a way to select multiple quantities to add to cart directly from the shop page.
/**
* Override loop template and show quantities next to add to cart buttons
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '</a><form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form><a href="#"class="shop-product-footer">';
}
return $html;
}WooCommerce function – Tiered shipping based on weight
The client’s shipping methods are split between offering customers a standard rate shipping 3-4 days, and expedited shipping 1-2 days. The issue is that WooCommerce out of the box doesn’t provide too many options for shipping.
After creating standard and expedited flat rate shipping values for each weight range in WooCommerce, 6 in total for the UK (flat_rate:3 – flat_rate:8) and another 6 for Jersey and Guernsey (flat_rate:10 – flat_rate:15) we were able to map them out to only show the correct shipping for each weight range in the cart.
/**
* @snippet Shipping by Weight
* Woocommerce flat rate shipping standard and expedited created for each tier
* @sourcecode https://businessbloomer.com/?p=21432
*/
function bbloomer_woocommerce_tiered_shipping( $rates, $package ) {
if ( WC()->cart->get_cart_contents_weight() < 1.5 ) {
if ( isset( $rates['flat_rate:3'], $rates['flat_rate:4'] ) ) {
unset( $rates['flat_rate:5'], $rates['flat_rate:6'], $rates['flat_rate:7'], $rates['flat_rate:8'] );
} elseif ( isset( $rates['flat_rate:10'], $rates['flat_rate:11'] ) ) {
unset( $rates['flat_rate:12'], $rates['flat_rate:13'], $rates['flat_rate:14'], $rates['flat_rate:15'] );
}
} elseif ( WC()->cart->get_cart_contents_weight() < 4.5 ) {
if ( isset( $rates['flat_rate:5'], $rates['flat_rate:6'] ) ) {
unset( $rates['flat_rate:3'], $rates['flat_rate:4'], $rates['flat_rate:7'], $rates['flat_rate:8'] );
} elseif ( isset( $rates['flat_rate:12'], $rates['flat_rate:13'] ) ) {
unset( $rates['flat_rate:10'], $rates['flat_rate:11'], $rates['flat_rate:14'], $rates['flat_rate:15'] );
}
} else {
if ( isset( $rates['flat_rate:7'], $rates['flat_rate:8'] ) ) {
unset( $rates['flat_rate:3'], $rates['flat_rate:4'], $rates['flat_rate:5'], $rates['flat_rate:6'] );
} elseif ( isset( $rates['flat_rate:14'], $rates['flat_rate:15'] ) ) {
unset( $rates['flat_rate:10'], $rates['flat_rate:11'], $rates['flat_rate:12'], $rates['flat_rate:13'] );
}
}
return $rates;
}
add_filter( 'woocommerce_package_rates', 'bbloomer_woocommerce_tiered_shipping', 9999, 2 );WooCommerce function – Change shipping message
Here the client requested only to ship to the UK but allow customers to purchase from anywhere worldwide. To avoid any confusion for the customer we added a message to the shipping area in the checkout informing them that the company only delivers to the UK if they change their shipping address to anything other than UK.
/**
* Change shipping message
*/
add_filter( 'woocommerce_no_shipping_available_html', 'littleargentina_no_shipping_message' );
add_filter( 'woocommerce_cart_no_shipping_available_html', 'littleargentina_no_shipping_message' );
function littleargentina_no_shipping_message( $message ) {
return __( 'We only ship to the UK. Please select "Deliver to a different address" if you are purchasing from outside the UK' );
}WooCommerce function – Grouped products default quantity to 1
By default the grouped products settings in WooCommerce show 0 quantity. This function adds 1 to each product quantity in the grouped product page.
/**
* Change default quantity to 1 for all products (done for grouped products)
*/
add_filter( 'woocommerce_quantity_input_args', 'custom_quantity', 10, 2 );
function custom_quantity( $args, $product ) {
$args['input_value'] = empty($args['input_value']) ? 1 : $args['input_value'];
return $args;
}Shortcode to work with theme customizer for social links
Here the Neve theme has a clever header and footer customiser, but the free version doesn’t come with a lot of options. I created a shortcode that can be accepted into the customiser then added social media icons and links structure in a separate file using Font Awesome icons and finally added a way for the client to update their social links in the backend, giving them the ability to add more icons or change the ones already set up.
Header banner message
In a similar way I created a method of the client to update the content of the header banner text. If there was no text the banner would not appear. It was an easy way for the client to inform their customers of current deals.
Popup message
A simple pop up message was requested to inform customers of latest news regarding covid or other business news about the company. This custom pop up uses javascript cookies to store whether a user has already seen and clicked close on the popup message.
What you can do with a ton of free plugins
There are a lot of free plugins with premium versions available. With a little trial and error and some research you can add a great deal of extra functionality to WordPress and WooCommerce for next to nothing. Increase security, add improved SEO, optimise images, add templates and designs, cache and improve page speed, there are so many extras to choose from it can be overwhelming.
You do need to watch out for plugin conflicts and keeping them updated, best check to see if the plugin has good reviews and has active developers working on it. You can run into issues later down the line with plugins that are not regularly updated or being developed.
Stick to solving one thing at a time and always test and test again.
Live Site
