Add to cart button for Vertical and Horizontal results
WooCommerce - Add to cart button for Vertical and Horizontal results
While there is no option to display an add to cart button, you can use a custom function to do so.
1
add_filter('asp_results', 'asp_add_to_cart_data', 1, 1);
2
function asp_add_to_cart_data($results) {
3
$product_add_to_cart_text = 'Add to cart';
4
$variation_add_to_cart_text = 'Choose variation'; // Leave it empty to not display at all
5
6
if (class_exists("WooCommerce")) {
7
$_pf = new WC_Product_Factory();
8
foreach ($results as &$r) {
9
if (
10
$r->content_type = "cpt" &&
11
in_array($r->post_type, array("product", "product_variation"))
12
) {
13
$product = $_pf->get_product($r->id);
14
$is_variable = $product->is_type( 'variable' ) || $r->post_type == 'product_variation';
15
$link = !$is_variable ? get_permalink(wc_get_page_id('shop')) : $product->get_permalink();
16
$ajax = !$is_variable ? ' ajax_add_to_cart' : '';
17
$text = !$is_variable ? $product_add_to_cart_text : $variation_add_to_cart_text;
18
if ( empty($text) )
19
continue;
20
ob_start();
21
?>
22
<div class="woocommerce">
23
<a href="<?php echo $link; ?>"
24
data-quantity="1"
25
class="button product_type_simple add_to_cart_button<?php echo $ajax; ?>"
26
data-product_id="<?php echo $r->id; ?>" data-product_sku=""
27
rel="nofollow"><?php echo $text; ?></a>
28
</div>
29
<?php
30
$button = ob_get_clean();
31
$r->content .= $button;
32
}
33
}
34
}
35
return $results;
36
}
37
add_action('wp_footer', 'asp_add_to_cart_handler');
38
function asp_add_to_cart_handler() {
39
?>
40
<script>
41
jQuery(function(t){if("undefined"==typeof wc_add_to_cart_params)return!1;var a=function(){t(".asp_r").on("click",".add_to_cart_button",this.onAddToCart).on("click",".remove_from_cart_button",this.onRemoveFromCart).on("added_to_cart",this.updateButton).on("added_to_cart",this.updateCartPage).on("added_to_cart removed_from_cart",this.updateFragments)};a.prototype.onAddToCart=function(a){var o=t(this);if(o.is(".ajax_add_to_cart")){if(!o.attr("data-product_id"))return!0;a.preventDefault(),o.removeClass("added"),o.addClass("loading");var r={};t.each(o.data(),function(t,a){r[t]=a}),t(document.body).trigger("adding_to_cart",[o,r]),t.post(wc_add_to_cart_params.wc_ajax_url.toString().replace("%%endpoint%%","add_to_cart"),r,function(a){a&&(a.error&&a.product_url?window.location=a.product_url:"yes"!==wc_add_to_cart_params.cart_redirect_after_add?t(document.body).trigger("added_to_cart",[a.fragments,a.cart_hash,o]):window.location=wc_add_to_cart_params.cart_url)})}},a.prototype.onRemoveFromCart=function(a){var o=t(this),r=o.closest(".woocommerce-mini-cart-item");a.preventDefault(),r.block({message:null,overlayCSS:{opacity:.6}}),t.post(wc_add_to_cart_params.wc_ajax_url.toString().replace("%%endpoint%%","remove_from_cart"),{cart_item_key:o.data("cart_item_key")},function(a){a&&a.fragments?t(document.body).trigger("removed_from_cart",[a.fragments,a.cart_hash,o]):window.location=o.attr("href")}).fail(function(){window.location=o.attr("href")})},a.prototype.updateButton=function(a,o,r,e){(e=void 0!==e&&e)&&(e.removeClass("loading"),e.addClass("added"),wc_add_to_cart_params.is_cart||0!==e.parent().find(".added_to_cart").length||e.after(' <a href="'+wc_add_to_cart_params.cart_url+'" class="added_to_cart wc-forward" title="'+wc_add_to_cart_params.i18n_view_cart+'">'+wc_add_to_cart_params.i18n_view_cart+"</a>"),t(document.body).trigger("wc_cart_button_updated",[e]))},a.prototype.updateCartPage=function(){var a=window.location.toString().replace("add-to-cart","added-to-cart");t(".shop_table.cart").load(a+" .shop_table.cart:eq(0) > *",function(){t(".shop_table.cart").stop(!0).css("opacity","1").unblock(),t(document.body).trigger("cart_page_refreshed")}),t(".cart_totals").load(a+" .cart_totals:eq(0) > *",function(){t(".cart_totals").stop(!0).css("opacity","1").unblock(),t(document.body).trigger("cart_totals_refreshed")})},a.prototype.updateFragments=function(a,o){o&&(t.each(o,function(a){t(a).addClass("updating").fadeTo("400","0.6").block({message:null,overlayCSS:{opacity:.6}})}),t.each(o,function(a,o){t(a).replaceWith(o),t(a).stop(!0).css("opacity","1").unblock()}),t(document.body).trigger("wc_fragments_loaded"))},new a});
42
</script>
43
<?php
44
}
Copied!
..and use this custom CSS code for some basic formatting:
1
.asp_content a.add_to_cart_button,
2
.asp_content a.added_to_cart {
3
display: none;
4
padding: 10px 15px !important;
5
bottom: 5px;
6
right: 5px;
7
z-index: 10000000;
8
position: absolute;
9
line-height: 13px;
10
}
11
12
.asp_content a.added_to_cart {
13
bottom: 5px;
14
right: 126px;
15
background: white;
16
}
17
18
@media only screen
19
and (min-device-width: 320px)
20
and (max-device-width: 1024px) {
21
.asp_content a.add_to_cart_button {
22
display: block !important;
23
}
24
}
25
26
.asp_content:hover a.add_to_cart_button,
27
.asp_content:hover a.added_to_cart {
28
display: block;
29
}
Copied!
Last modified 1yr ago
Copy link