infocities

[[[DIVSTYLE:TProw|[[[DIVSTYLE:TPcol-sm-5;text-align:center;|[[[PIC:Vickers-logo.svg |100%|||TPlogoTop|||||]]] ]]] [[[DIVSTYLE:TPcol-sm-7 TPhidden-xs| ]]] ]]]

infocities

{
    "particles": {
        "number": {
            "value": 400,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {

infocities

<?php

/**
 * Class Name: Bootstrap_Collapse_NavWalker
 * GitHub URI: https://gist.github.com/mtx-z/db34d68364108c0285e6e3e721630846
 * Description: A custom WordPress 5.3 nav walker class for Bootstrap 4.4 nav menus in a custom theme using the WordPress built in menu manager
 * Version: 0.1
 * Author: Mtxz
 * Source: https://github.com/filipszczepanski/wp-bootstrap4-collapse-navwalker
 * Tested only with 1 sublevel, but should work with as many level as you want

infocities

<?php
/**
 * Edit default Woocommerce product loop thumbnail template
 * As there is no dedicated Woocommerce template (eg wp-content/plugins/woocommerce/templates/loop/price.php)
 * because it's generated using filter, we must remove Woocommerce hook, and add our own "at the same place"
 * to edit the product loop thumbnail template
 * tested up to (12/10/2020) : 
 * Wordpress 5.7
 * Woocommerce 3.8.1
 * PHP 7.3.7

infocities

<?php


/**
 * List available attributes on product page in a drop-down selection
 */
add_action('woocommerce_before_add_to_cart_button', 'list_attributes_on_product_page');
function list_attributes_on_product_page() {
    global $product;
    $attributes = $product->get_attributes();

infocities

<?php
/**
 * Edit checkout form inputs
 * source: https://gist.github.com/nickkuijpers/5d07ecf9b0a0678b4f4c
 */
add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );
/**
 * @param $fields
 * @return mixed
 */

infocities

So, you know how to override a template file in Woocommerce using Sage, but you're having trouble changing something within the deeper level of that template file. For example, you want to change the output HTML structure of a given part of the product page loop, or incorporate a Bootstrap class into a button element without using Jquery to inject it. Here's how you can override deeper level parts, the default WC theme elements.

Prerequisites

• Check out the info on how template overriding works in Woocommerce before you begin.
• Also check out how to set up Sage Templates & Woocommerce
• Install Roots Wrapper Toolbar to preserve your sanity!

Now you're familiar with how to do Sage + Woocommerce templates, it's time to make it happen.

The template page override

infocities

<?php

  function load_existing_product_gallery_into_acf_gallery_field($field) {
    global $post;
    $field['value'] = explode(',', get_post_meta($post->ID, '_product_image_gallery', true));
    return $field;
  }
  add_filter('acf/load_field/name=product_gallery', 'load_existing_product_gallery_into_acf_gallery_field');

infocities

add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  // $cols contains the current number of products per page based on the value stored on Options -> Reading
  // Return the number of products you wanna show per page.
  $cols = 9;
  return $cols;
}

infocities

<?php
//AJAX ADD TO CART BUTTON

$product_id = 143;
if( !my_custom_cart_contains( $product_id ) ) {
	?>
	<button class="my-custom-add-to-cart-button" data-product-id="<?php echo $product_id; ?>">add to cart</button>
	<?php
} else {
	?>