Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Styling WooCommerce

138 views

Published on

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

Published in: Internet
  • Login to see the comments

  • Be the first to like this

Styling WooCommerce

  1. 1. {STYLING: WOOCOMMERCE; } BeckyDavisDesign.com @beckyddesign
  2. 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. 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. 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. 5. OUT OF THE BOX BeckyDavisDesign.com @beckyddesign Parent categories Sub-categories Single category Single product
  6. 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. 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. 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. 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. 10. FILTERING WITH FACETS  FacetWP plugin  Setup facet  Add shortcode to sidebar [facetwp facet="birdfood_sub_cat"] BeckyDavisDesign.com @beckyddesign
  11. 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. 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. 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. 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

×