Products (WC)

A0046

Expand

Code With ACF Integration

HTML

<!-- A0046 ----------------->
<?php if (have_rows('a0046')) : ?>
    <?php
    while (have_rows('a0046')) : the_row();
        $_pfx = new WC_Product_Factory();
        $products = array();
        for ($i=1; $i<5; $i++) {
            array_push($products, $_pfx->get_product(get_sub_field('product_' . $i . '_id')));
        }
        ?>
        <section class="a0046">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2><?php echo get_sub_field('header'); ?></h2>
                        <div class="a0046-text"><?php echo get_sub_field('text'); ?></div>
                    </div>
                    <?php
                    $counter=1;
                    foreach ($products as $_product)
                    {
                    if ($_product) { ?>
                    <div class="col-12 col-md-6 col-lg-3 mt-4">
                        <div class="a0046-pic">
                            <a class="" data-toggle="modal" data-target="#mdlx<?php echo $counter; ?>">
                                <div class="a0046-box">
                                <img class="a0046-img" src="<?php echo get_the_post_thumbnail_url(get_sub_field('product_'.$counter.'_id')); ?>"
                                     alt="">
                                <a class="a0046-btn-info" data-toggle="modal" data-target="#mdlx<?php echo $counter; ?>">Info</a>
                                </div>
                            </a>
                            <h3><?php echo $_product->name; ?></h3>
                            <h6><?php echo $_product->short_description; ?></h6>
                            <div class="a0046-box-footer">
                                <?php if ((int)$_product->sale_price != 0) { ?>
                                    <h4 class="a0046-price-sele">$<?php echo $_product->sale_price; ?></h4>
                                <?php } else { ?>
                                    <h4 class="a0046-price-sele">$<?php echo $_product->regular_price; ?></h4>
                                <?php } ?>
                                <a href="?add-to-cart=<?php echo get_sub_field('product_'.$counter.'_id'); ?>" data-quantity="1"
                                   class="button product_type_simple add_to_cart_button ajax_add_to_cart a0046-btn-front"
                                   data-product_id="<?php echo get_sub_field('product_'.$counter.'_id'); ?>" data-product_sku=""
                                   aria-label="Add “<?php echo $_product->name; ?>” to your cart"
                                   rel="nofollow">Buy Now</a>
                            </div>

                        </div>
                    </div>
                    <?php
                        show_modal_wnd($_product, get_sub_field('product_'.$counter.'_id'), "mdlx".$counter);
                    }
                        $counter++;
                    }
                    ?>
                </div>
            </div>
        </section>
    <?php endwhile; ?>
<?php endif; ?>
<!-- A0046 end-------------->

CSS

/* A0046 ---------------------------------------------------*/
.a0046 {
    padding-bottom: 30px;
}

.a0046 h2{
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 57px;
    line-height: 70px;
    text-align: center;
    color: #454545;
    margin-top: 10px;
}

.a0046-text{
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 33px;
    text-align: center;
    color: #454545;
}

.a0046-pic{
    border: 1px solid #E57F23;
    box-sizing: border-box;
    box-shadow: 0px 0px 13px 1px rgb(0 0 0 / 20%);
    height: 100%;
    padding-bottom: 105px;
}

.a0046 h3{
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    color: #454545;
    padding: 5px 10px;
    margin: 0px;
    padding-bottom: 0px;
}

.a0046 h6{
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #454545;
    padding: 0px 10px;
}

.a0046-price-regular {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 27px;
    line-height: 17px;
    text-align: center;
    text-decoration-line: line-through;
    color: #CFA47C;
    margin-top: 10px;
}

.a0046-price-sele {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 34px;
    line-height: 37px;
    text-align: center;
    color: #454545;
}

.a0046-box{
    position: relative;
}

.a0046-box:hover{
    background-color: #000;
}

.a0046-box:hover .a0046-img {
    opacity: 0.7;
}

.a0046-box:hover > .a0046-btn-info{
    display: block;
}

.a0046-btn-info{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background-color: rgba(255, 255, 255, 0.87) !important;
    border: 1px solid #E57F23;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 23px;
    text-align: center;
    color: #E57F23 !important;
    display: none;
}

.a0046-img{
    display: block;
    margin: auto;
}

.a0046-box-footer {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
}

.a0046-box-footer .added_to_cart {
    background: #fff;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 14px;
    text-align: center;
    color: #444444 !important;
    padding: 0px 0px;
    width: 80%;
    float: none;
    display: block;
    margin: auto;
    margin-top: 5px;
}

.modal-dialog .modal-content {
    background: #F5F5F5;
    border: 2px solid #E57F23;
    box-sizing: border-box;
    border-radius: 5px;
    top: 20px;
    max-width: 1140px;
    width: 90%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.modal-dialog {
    max-width: 100%;
    width: 100%;
}

.modal-img {
    max-width: 100%;
    width: 100% !important;
    display: block;
    margin: auto;
}

.btn-secondary {
    background-color: #fdc089 !important;
    border: none !important;
    padding: 10px 20px;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 500;
    font-size: 19px;
    line-height: 33px;
    text-align: center;
    color: #FFFFFF;
    margin: 0px;
}

.btn-secondary:not([disabled]):not(.disabled):active, .btn-secondary:not([disabled]):not(.disabled).active, .show>.btn-secondary.dropdown-toggle {
    background-color: #fdc089 !important;
}

.modal--price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: right;
    margin-top: 20px;
    grid-gap: 20px;
}

.modal--buy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: right;
    margin-top: 20px;
    grid-gap: 20px;
    align-items: end;
    position: absolute;
    left: 2%;
    bottom: 10px;
    width: 98%;
}

.price-regular {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    text-align: right;
    text-decoration-line: line-through;
    color: #CFA47C;
}

.price-sele {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 50px;
    text-align: center;
    color: #454545;
}

.add_to_cart_button {
    background: #E57F23;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    color: #FFFFFF !important;
    padding: 10px 0px;
    width: 250px;
    float: left;
}

.added_to_cart {
    background: #addb50;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    color: #FFFFFF !important;
    padding: 10px 0px;
    width: 250px;
    float: left;
    margin-top: 5px;
}

.btns-padding{
    padding-bottom: 140px;
}

.btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active, .show>.btn-primary.dropdown-toggle {
    background-color: #fdc089 !important;
}

.a0046-btn-front {
    background: #FFFFFF;
    border: 1px solid #E57F23;
    box-sizing: border-box;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    color: #E57F23 !important;
    display: block;
    width: 80%;
    margin: auto;
    padding: 0px 0px;
    float: none;
}

@media (max-width: 992px) {
    .a0046-img {
        padding: 10px;
    }

    .price-regular {
        text-align: center;
    }

    .modal--price-grid {
        grid-template-columns: 1fr;
        text-align: center;
        margin-top: 10px;
        grid-gap: 0px;
    }

}

@media (max-width: 576px) {
    .btns-padding{
        padding-bottom: 0px;
    }

    .modal--buy-grid {
        grid-template-columns: 1fr;
        text-align: right;
        margin-top: 20px;
        grid-gap: 20px;
        align-items: end;
        position: relative;
        width: 100%;
    }

    .add_to_cart_button {
        width: 100%;
    }

    .added_to_cart {
        width: 100%;
    }

    .price-regular {
        font-size: 30px;
        text-align: center;
    }

    .price-sele {
        font-size: 38px;
        line-height: 40px;
    }

    .a0046-btn-front {
        width: 80%;
    }
}
/* A0046 END -----------------------------------------------*/

Outputs the data of four products defined by id to a modal window.

Cart (WC)

Expand

Code Only (Without ACF Integration)

CSS

.bascet-position {
position: absolute;
right: 20px;
top: 0;
}


@media (max-width: 992px)
{
.bascet-position {
position: absolute;
right: 100px;
}
}

.cart-contents {
position: relative;
display: block;
justify-content: center;
width: fit-content;
}

.cart-contents:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f07a" !important;
font-size: 26px;
color: #E57F23;
}


.cart-contents-count {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
line-height: 13px;
height: 20px;
width: 20px;
vertical-align: middle;
text-align: center;
color: #fff;
background: #000;
border-radius: 50%;
padding: 5px 5px;
display: block;
position: absolute;
top: 0px;
right: -10px;
}


.modal-dialog .modal-content {
background: #F5F5F5;
border: 2px solid #E57F23;
box-sizing: border-box;
border-radius: 5px;
top: 20px;
max-width: 800px;
width: 90%;
left: 50%;
transform: translate(-50%, 0%);
}

#modalcart .modal-title {
margin-bottom: 0;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 50px;
line-height: 50px;
color: #454545;
text-align: center;
width: 100%;
}

.btn-secondary {
background-color: #fdc089 !important;
border: none !important;
padding: 10px 20px;
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-size: 19px;
line-height: 33px;
text-align: center;
color: #FFFFFF;
margin: 0px;
}

.checkout-button {
background-color: #ff7901 !important;
border: none !important;
padding: 8px 20px !important;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 24px !important;
line-height: 33px;
text-align: center;
color: #FFFFFF !important;
display: block;
width: fit-content;
margin-top: 16px;
margin-left: 10px;
border-radius: 5px;
}

@media (max-width: 992px)
{
.checkout-button {
margin: auto;
width: 100%;
}
}

#modal-cart-dropdown-ustom {
display: grid;
grid-template-columns: 200px auto 40px;
grid-gap: 20px 50px;
margin-bottom: 20px;
border: 1px solid #b3b2b2;
padding: 10px;
border-radius: 5px;
}

@media (max-width: 768px)
{
#modal-cart-dropdown-ustom {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
width: fit-content;
margin: auto;
margin-bottom: 20px;
}
}

#modal-cart-dropdown-ustom img {
border: 1px solid #E57F23;
box-sizing: border-box;
box-shadow: 0px 0px 13px 1px rgb(0 0 0 / 20%);
height: 100%;
display: block;
max-width: 200px;
border-radius: 5px;
}

#modal-cart-dropdown-ustom .product-name {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 20px;
color: #454545;
display: block;
padding-bottom: 20px;
padding-top: 10px;
}

#modal-cart-dropdown-ustom .price {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 21px;
line-height: 20px;
color: #454545;
display: block;
padding-bottom: 5px;
}

#modal-cart-dropdown-ustom .quantity {
float: left;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 31px;
color: #454545;
display: block;
width: 87px;
text-align: center;
background: transparent;
border: 0px;
}

.quantity-for-text {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 33px;
color: #454545;
width: 27px;
text-align: center;
background: transparent;
margin: 0px;
display: block;
float: left;
padding: 0px;
}

#modal-cart-dropdown-ustom .quantity input[type="number"] {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 17px;
line-height: 22px;
color: #454545;
display: block;
width: 60px;
text-align: center;
background: transparent;
padding-left: 10px;
margin-left: 10px;
}

#modal-cart-dropdown-ustom .total {
clear: both;
font-family: Open Sans;
font-style: normal;
font-weight: 800;
font-size: 20px;
line-height: 31px;
color: #454545;
display: block;
}

#modal-cart-dropdown-ustom .remove {
text-align: center;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 33px;
color: #454545;
display: block;
padding-top: 10px;
}

@media (max-width: 768px)
{
#modal-cart-dropdown-ustom .remove {
text-align: right;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 60px;
line-height: 33px;
color: #454545;
display: block;
padding-top: 10px;
margin-top: -60px;
margin-right: 10px;
}
}

.cart-customlocation {
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-size: 25px;
line-height: 33px;
color: #000000;
display: block;
text-align: center;
width: fit-content;
padding-left: 10px;
margin-top: 0px;
}

.cart-footer-grid .button {
float: right;
background-color: #fff0 !important;
border: 1px solid #ff7901;
padding: 6px 10px;
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 20px;
text-align: center;
color: #ff7901 !important;
display: block;
width: fit-content;
border-radius: 5px;
}

1. STEP

To functions.php file:

add_filter( ‘wc_add_to_cart_message_html’, ‘__return_null’ );
This filter don’t show view cart button after buy now click.

2. STEP

To functions.php file:

add_action( ‘wp_ajax_misha’, ‘truemisha_ajax’ );
add_action( ‘wp_ajax_nopriv_misha’, ‘truemisha_ajax’ );

function truemisha_ajax(){
foterLoop();
foterCart();
die;
}

function foterLoop(){
?>
<form class=”woocommerce-cart-form” action=”<?php echo esc_url( wc_get_cart_url() ); ?>” method=”post”>
<?php do_action( ‘woocommerce_before_cart_table’ ); ?>
<div class=”upper-grid”>
<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { ?>
<div id=”modal-cart-dropdown-ustom” class=”modal-cart-dropdown-ustom”>
<?php
$_product = apply_filters( ‘woocommerce_cart_item_product’, $cart_item[‘data’], $cart_item, $cart_item_key );
$product_id = apply_filters( ‘woocommerce_cart_item_product_id’, $cart_item[‘product_id’], $cart_item, $cart_item_key );

if ( $_product && $_product->exists() && $cart_item[‘quantity’] > 0 && apply_filters( ‘woocommerce_cart_item_visible’, true, $cart_item, $cart_item_key ) ) {
$product_permalink = apply_filters( ‘woocommerce_cart_item_permalink’, $_product->is_visible() ? $_product->get_permalink( $cart_item ) : ”, $cart_item, $cart_item_key );
?>
<tr class=”woocommerce-cart-form__cart-item <?php echo esc_attr( apply_filters( ‘woocommerce_cart_item_class’, ‘cart_item’, $cart_item, $cart_item_key ) ); ?>”>

<td class=”product-thumbnail”>
<?php
$thumbnail = apply_filters( ‘woocommerce_cart_item_thumbnail’, $_product->get_image(), $cart_item, $cart_item_key );

if ( ! $product_permalink ) {
echo $thumbnail;
} else {
printf( ‘<div><a href=”%s”>%s</a></div>’, esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
}
?>
</td>
<div>
<td class=”product-name” data-title=”<?php esc_attr_e( ‘Product’, ‘woocommerce’ ); ?>”>
<?php
if ( ! $product_permalink ) {
echo wp_kses_post( apply_filters( ‘woocommerce_cart_item_name’, $_product->get_name(), $cart_item, $cart_item_key ) . ‘ ’ );
} else {
echo wp_kses_post( apply_filters( ‘woocommerce_cart_item_name’, sprintf( ‘<div class=”product-name”><span href=”%s”>%s</span></div>’, esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
}

do_action( ‘woocommerce_after_cart_item_name’, $cart_item, $cart_item_key );

// Meta data.
echo wc_get_formatted_cart_item_data( $cart_item ); // PHPCS: XSS ok.

// Backorder notification.
if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item[‘quantity’] ) ) {
echo wp_kses_post( apply_filters( ‘woocommerce_cart_item_backorder_notification’, ‘<p class=”backorder_notification”>’ . esc_html__( ‘Available on backorder’, ‘woocommerce’ ) . ‘</p>’, $product_id ) );
}
?>
</td>

<td class=”product-price” data-title=”<?php esc_attr_e( ‘Price’, ‘woocommerce’ ); ?>”>
<?php
echo “<div class=’price’>Price: “;
echo apply_filters( ‘woocommerce_cart_item_price’, WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
echo “</div>”;
?>
</td>
<td class=”product-quantity” data-title=”<?php esc_attr_e( ‘Quantity’, ‘woocommerce’ ); ?>”>
<?php
if ( $_product->is_sold_individually() ) {
$product_quantity = sprintf( ‘1 <input type=”hidden” name=”cart[%s][qty]” value=”1″ />’, $cart_item_key );
} else {
$product_quantity = woocommerce_quantity_input(
array(
‘input_name’ => “cart[{$cart_item_key}][qty]”,
‘input_value’ => $cart_item[‘quantity’],
‘max_value’ => $_product->get_max_purchase_quantity(),
‘min_value’ => ‘0’,
‘product_name’ => $_product->get_name(),
),
$_product,
false
);
}
echo “<div><span class=’quantity’> Quantity: </span>”;
echo “<span class=’quantity-for-text’>”;
echo apply_filters( ‘woocommerce_cart_item_quantity’, $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.
echo “</span>”;
echo “</div>”;
?>
</td>

<td class=”product-subtotal” data-title=”<?php esc_attr_e( ‘Subtotal’, ‘woocommerce’ ); ?>”>
<?php
echo “<div class=’total’> Total: “;
echo apply_filters( ‘woocommerce_cart_item_subtotal’, WC()->cart->get_product_subtotal( $_product, $cart_item[‘quantity’] ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
echo “</div>”;
?>
</td>
</div>
<td class=”product-remove”>
<?php
echo apply_filters(
‘woocommerce_cart_item_remove_link’,
sprintf(
‘<div><a href=”%s” class=”remove” aria-label=”%s” data-product_id=”%s” data-product_sku=”%s”>×</a></div>’,
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
esc_html__( ‘Remove this item’, ‘woocommerce’ ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() )
),
$cart_item_key
);
?>
</td>
</tr>
<?php
} ?>
</div>
<?php
}
?>
</div>

<div class=”cart-footer-grid”>
<div class=”cart-customlocation”>
<?php echo sprintf ( _n( ‘%d Item’, ‘%d Items’, WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>: <?php echo WC()->cart->get_cart_total(); ?>
</div>
<div>
<button type=”submit” class=”button” name=”update_cart” value=”<?php esc_attr_e( ‘Update cart’, ‘woocommerce’ ); ?>”><?php esc_html_e( ‘Update cart’, ‘woocommerce’ ); ?></button>
<?php do_action( ‘woocommerce_cart_actions’ ); ?>
<?php wp_nonce_field( ‘woocommerce-cart’, ‘woocommerce-cart-nonce’ ); ?>
<?php do_action( ‘woocommerce_after_cart_table’ ); ?>
</div>
</div>
</form>
<?php
}

function foterCart(){
?>
<div class=”wc-proceed-to-checkout”>
<a href=”/checkout/” class=”checkout-button button alt wc-forward”>
Proceed to checkout</a>
</div>
<?php
}

To footer.php file:

<div class=”modal fade” id=”modalcart” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel” aria-hidden=”true”>
<div id=”wa_bc8_modal” class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title” id=”exampleModalLabel”>Cart</h5>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”modal-body wa_bc8_modal”>
<div id=”t0″>
<?php
foterLoop();
foterCart();
?>
</div>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>

</script>

3. STEP

To functions.php file:

add_shortcode (‘woo_cart_but’, ‘woo_cart_but’ );
/**
* Create Shortcode for WooCommerce Cart Menu Item
*/
function woo_cart_but() {
ob_start();

$cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL

?>
<div class=”bascet-position”>
<a class=”cart-contents menu-item” data-toggle=”modal” data-target=”#modalcart”>
<?php
if ( $cart_count > 0 ) {
?>
<span class=”cart-contents-count”><?php echo $cart_count; ?></span>
<?php
}
?>
</a>
</div>
<?php

return ob_get_clean();

}

add_filter( ‘woocommerce_add_to_cart_fragments’, ‘woo_cart_but_count’ );
/**
* Add AJAX Shortcode when cart contents update
*/
function woo_cart_but_count( $fragments ) {
ob_start();
$fragments=array();
$cart_count = WC()->cart->cart_contents_count;
$cart_url = wc_get_cart_url();

?>
<a class=”cart-contents menu-item” data-toggle=”modal” data-target=”#modalcart”>
<?php
if ( $cart_count > 0 ) {
?>
<span class=”cart-contents-count”><?php echo $cart_count; ?></span>
<?php
}
?>
</a>
<?php
$fragments[‘a.cart-contents’] = ob_get_clean();

return $fragments;
}

add_filter( ‘wp_nav_menu_top-menu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu’

/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
$items .= ‘[woo_cart_but]’; // Adding the created Icon via the shortcode already created

return $items;
}

To header.php file:

<?php
echo do_shortcode(“[woo_cart_but]”);
?>

4. STEP

Add styles to style file.