Tutorial Category: WooCommerce

  • Invoice payment in WooCommerce

    Invoice payment in WooCommerce

    Setting up an invoice payment in WooCommerce. Part 1: Install and activate PDF Invoices & Packing Slips plugin. (Or any of the other PDF plugins.) I am using: WooCommerce PDF Invoices & Packing Slips. After activating the plugin the settings show up under WooCommerce -> PDF Invoices. There is an option to “Run the Setup…

  • WooCommerce: Modifying the cart page

    WooCommerce: Modifying the cart page

    How to modify the WooCommerce Cart page. Here is the default cart page using the theme Twenty Twenty Two. Add a continue button. Result: For a variation of the above code check my tutorial: Add a Continue Shopping button to Single product, Cart and Checkout pages. Exchange x for a Fontawesome or Dashicon trash icon.…

  • WooCommerce: Adjust shipping price when quantity changes

    WooCommerce: Adjust shipping price when quantity changes

    I have added on to this tutorial.Adjust shipping fee based on quantity in cart.Adjust shipping fee based on total amount in cart. Adjust shipping fee based on quantity in cart. Setup the WooCommerce -> Settings -> Shipping -> Shipping zones (states/countries), and the zone name. Then Save changes. Add a shipping method. Flat rate, Free…

  • WooCommerce: Add custom fields to the Checkout page

    WooCommerce: Add custom fields to the Checkout page

    Part 1: Modifications of the current fields seen in the checkout page. We are now at part 2: Add custom fields to the Checkout page. Here is the default Checkout page seen in the theme Twenty Twenty Two. Custom field types in WooCommerce country, state, text, textarea, select (dropdown), radio, checkbox, password, datetime, datetime-local, date,…

  • WooCommerce: Add a Continue Shopping button to Single product, Cart and Checkout pages.

    WooCommerce: Add a Continue Shopping button to Single product, Cart and Checkout pages.

    I decided to create a separate tutorial for adding a Continue Shopping button to multiple pages.The following example uses the theme Twenty Twenty Two. The CSS: Result: The Single Product page. Result: The Cart page. Result: The Checkout page. Just above the Place order button I added the Continue Shopping button. Resources used: Single product…

  • WooCommerce: modifying the Checkout page

    WooCommerce: modifying the Checkout page

    We are now at part 1: modifications of the current fields seen in the checkout page. Next up is part 2: Add custom fields to the Checkout page Here is the default cart page using the theme Twenty Twenty Two. Rename the heading “Billing details” to “Fill in the below information.” Rename “PLACE ORDER” button…

  • WooCommerce out of stock inquiry form

    WooCommerce out of stock inquiry form

    The following code will add a button to a product that is out of stock. Clicking the button will open a form. Example from Theme Twenty Twenty Two. If product is not in stock then show button. Add a forms shortcode to the form that you use. Here is an example using Ninja Forms shortcode.…

  • WooCommerce: Show or hide product category if user is logged inn.

    WooCommerce: Show or hide product category if user is logged inn.

    Show a product category if user is logged in and another product category if user is not logged in. A default shop page with a few products using the theme Twenty Twenty Two.There are three categories in use. “Uncategorized” (first product), “Rocks” (second product) and “Books” (third and fourth product). I will split up the…

  • Woocommerce: minimum quantity drop down

    Woocommerce: minimum quantity drop down

    The Single product page. Changing the Add to Cart quantity selector. Add the following code to change from arrow select to a drop-down. Add the following CSS: Result: Minimum quantity to (10) and maximum quantity to (500). Adjusting the above code to 10 minimum value and 500 maximum value: Begins with 10 and goes 10…

  • Modify the WooCommerce Shop page

    Modify the WooCommerce Shop page

    The typical shop page will look something like this:(Example using the theme Twenty Twenty Two.) Remove “Showing all x results” and sorting drop down. The WooCommerce Shop page contains the following hooks woocommerce_before_main_contentwoocommerce_archive_descriptionwoocommerce_before_shop_loopwoocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_titlewoocommerce_shop_loop_item_titlewoocommerce_after_shop_loop_item_titlewoocommerce_after_shop_loop_itemwoocommerce_after_shop_loopwoocommerce_after_main_content From: tychesoftwares: Woocommerce shop page hooks visual guide with code snippets Taking methods from Single Product page and using them here. Adding…

  • Modify the WooCommerce single – individual product page

    Modify the WooCommerce single – individual product page

    Here is an example of a single / individual product page in WooCommerce. Using the default theme Twenty Twenty Two. There are different ways to add code. Through a code snippet plugin, through the customizer, in a custom plugin or through a child theme functions.php file and style.css file. The product image We see the…