WooCommerce comes with some standard layouts out of the box. But what happens when you want something different? For this presentation, we will explore: - How to make Woo changes part of your theme - How to setup a custom 'shop' page and have all the back links work with it. - We'll look at all the shortcodes that are available, to segment your products. - How to add faceted filters to product groups

1. {STYLING: WOOCOMMERCE; }
BeckyDavisDesign.com @beckyddesign

2. ABOUT BECKY
 Theme Dev from Chicago
 1st WordPress site in 2009
 1st WordCamp – Chicago 2010
 Speaker Chicago, Milwaukee, Salt Lake City,
Minneapolis, Ann Arbor, NYC, Miami & Europe.
Attendee at dozens of others.
 Number of WordPress custom themes built – 50+
 Mom – both kids out of college
 Beckydavisdesign.com @beckyddesign
BeckyDavisDesign.com @beckyddesign

3. MAKE WOO YOUR OWN
 Theme must have declared function to support Woo
 Start with _s and get Woo support built in
BeckyDavisDesign.com @beckyddesign

4. WOO PAGES
 Checkout, Cart and My Account will use
theme templates. These pages replace
the_content() with their own.
 Shop, Single product and Archive/taxonomy
pages use their own Woo templates
 These can be copied/edited and
customized a bit, but will need updating
every time Woo updates the originals.
 These files need to be copied to your
theme’s woocommerce folder and then
edited. Must match directory structure.
BeckyDavisDesign.com @beckyddesign
Plugin
Theme

5. OUT OF THE BOX
BeckyDavisDesign.com @beckyddesign
Parent categories
Sub-categories
Single category
Single product

6. EDIT TEMPLATE FILE
 Copy cart.php from Woo templates folder to override it
 Paste in your theme folder (don’t forget directory structure)
 Edit
<div class="cart-collaterals">
<p class="return-to-shop"> <!-- BDD CUSTOM -->
<div class="woocommerce-info special" >
<?php _e('<p>Free UPS ground shipping to the 48 continental United States
on all orders with a subtotal of $100 or more.</p>', 'vet');?>
<a class="button wc-backward" href="<?php echo esc_url( apply_filters(
'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">
<?php _e( 'Return to shop', 'woocommerce' ) ?>
</a>
</div>
BeckyDavisDesign.com @beckyddesign

7. FAKE IT TILL YOU MAKE IT
 Out of the box sorting is terrible
 No sub-category with products and then another sub-
category
 All Woo product pages are generated by their
archive-product.php template file
 You can add text/img to top of Shop page, but not
much else
 What happens when you get a custom design?
BeckyDavisDesign.com @beckyddesign

8. CUSTOM SHOP PAGE
 Create a custom template
 Add custom fields
 Add product shortcodes
[products limit="4" columns="4"
category="featured"]
[product_categories
number="12" parent="63"]
(In template file, wrap these in an echo)
<?php echo do_shortcode
('[product_categories number="12"
parent="63"]');?>
BeckyDavisDesign.com @beckyddesign

9. SHOP PAGE RE-DIRECT
 Create a new page for the template
 Re-direct all ‘shop’ links to this page
function wc_empty_cart_redirect_url() {
return ( home_url( '/' ).'shop');
}
add_filter( 'woocommerce_return_to_shop_redirect',
'wc_empty_cart_redirect_url’ );
 Do not set this as Shop page in Woo
 Re-name original shop page
BeckyDavisDesign.com @beckyddesign

10. FILTERING WITH FACETS
 FacetWP plugin
 Setup facet
 Add shortcode to sidebar
[facetwp facet="birdfood_sub_cat"]
BeckyDavisDesign.com @beckyddesign

11.  Create facet template in plugin
 Add template to archive-product.php
<!-- BDD add custom facet sidebar -->
<?php if (is_product_category()) {
echo get_sidebar('store');
echo "<div class='facetwp-template store'>";
}
?>
<!-- BDD add div to differentiate between shop and product pages -->
<?php if (is_shop()){
echo "<div class='shop'>";
}
?>
BeckyDavisDesign.com @beckyddesign

12. USEFUL FUNCTIONS
 https://www.speakinginbytes.com/2016/06/woocommerce-
sort-shipping-methods-cost/ Shipping rates can get out of order
and not show cheapest first, this fixes that.
 Get rid of the extra stuff
//remove breadcrumbs
remove_action ('woocommerce_before_main_content','woocommerce_breadcrumb',20);
//remove sorting
remove_action ('woocommerce_before_shop_loop','woocommerce_catalog_ordering', 30);
//remove result count
remove_action ('woocommerce_before_shop_loop', 'woocommerce_result_count', 20);
BeckyDavisDesign.com @beckyddesign

13. USEFUL EXTENSIONS
 WP Menu cart
 WooCommerce Catalog Visibility Options – hide pricing and buttons
to all or just certain user roles
 SearchWP – fantastic plugin to improve on-site search. Has Woo
extension and one for custom Term Synonyms
 WooCommerce Tab manager – make the description tabs your own.
(You can do this with hooks as well.)
BeckyDavisDesign.com @beckyddesign

14. REFERENCE LINKS
 Excellent presentation by Bridget Wessell:
 https://www.slideshare.net/bridgetwes/theming-
woocommerce-word-camp-milwaukee-2015
 Woo shortcodes:
 https://docs.woocommerce.com/document/woocommer
ce-shortcodes/
BeckyDavisDesign.com @beckyddesign