Skip to main content

WooCommerce Visual Hook Guide: Cart Page

 I’ve put together a visual (yet, you can copy/paste!) hook guide for the WooCommerce Cart Page. If you like this and it is helpful to you, let me know in the comments and I’ll create another one for the checkout, single product page and my account page.

You can find WooCommerce Cart hooks quickly and easily by seeing their actual locations. Great thing is – all you need to do in your functions.php is “add_action(‘place-hook-here’,’your-PHP-function-here’);” and you can place your custom functions anywhere on the WooCommerce Cart Page. Enjoy!

WooCommerce Cart Page [Visual Hook Guide]

Cart

woocommerce_before_cart

woocommerce_before_cart_table

  ProductPriceQuantityTotal
woocommerce_before_cart_contents
×Ciara Bow Earrings GoldTest 6€5,00
2
€10,00
×Isla ringTest product€1,00
1
€1,00
woocommerce_cart_contents

 

woocommerce_cart_coupon

woocommerce_after_cart_contents

woocommerce_after_cart_table

woocommerce_cart_collaterals

You may be interested in…

woocommerce_before_cart_totals

Cart Totals

Subtotal€11,00
woocommerce_cart_totals_before_shipping
Shipping

woocommerce_before_shipping_calculator

Calculate Shipping

woocommerce_after_shipping_calculator

woocommerce_cart_totals_after_shipping
woocommerce_cart_totals_before_order_total
Total€18,00
woocommerce_cart_totals_after_order_total

woocommerce_proceed_to_checkoutProceed to Checkout

woocommerce_after_cart_totals

woocommerce_after_cart

WooCommerce Cart Default add_actions

// These are actions you can unhook/remove!
 
add_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
add_action( 'woocommerce_cart_collaterals', 'woocommerce_cart_totals', 10 );
add_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

Comments

Popular posts from this blog

Sample VS code setting

  When you are a software developer, you need to configure your IDE working with most convinience for your working, bellow is a sample code snippet to config your IDE {   "diffEditor.ignoreTrimWhitespace" : false ,   "javascript.updateImportsOnFileMove.enabled" : "always" ,   "[typescriptreact]" : {       "editor.defaultFormatter" : "esbenp.prettier-vscode"   },   "editor.formatOnPaste" : true ,   "workbench.settings.applyToAllProfiles" : [],   "editor.tabSize" : 2 ,   "redhat.telemetry.enabled" : true ,   "editor.codeActionsOnSave" : {       },   // "editor.codeActionsOnSave": {   //   "source.fixAll": "explicit",   //   "source.fixAll.eslint": "explicit",   //   "source.organizeImports": "explicit",   //   "source.sortMembers": "explicit",   //   "javascript.showUnused": "...

Docker Compose: Node.js Express and MongoDB example

  Docker   provides lightweight containers to run services in isolation from our infrastructure so we can deliver software quickly. In this tutorial, I will show you how to dockerize Nodejs Express and MongoDB example using   Docker Compose .