Product Details aren’t Sent in dataLayer – Oxygen Custom Made Website

Hi,

There are two types of add to cart events in terms of GTM4WP handling: the one on product detail pages and practically all other add to cart button.

The woocommerce_after_add_to_cart_button hook is actually part of a HTML code generator that places a <form> element on the product detail page:

https://github.com/woocommerce/woocommerce/blob/b19500728b4b292562afb65eb3a0c0f50d5859de/templates/single-product/add-to-cart/simple.php#L51

As far as I can see this form element is completely missing from your version. Therefore adding just the hook will not make this work.

Add to cart button in product lists need to have the extra <span> element added by GTM4WP which is added during the woocommerce_after_shop_loop_item hook.

Perhaps this can help you to make this work

Hi Thomas,

thank you a lot for your tips. Those were very helpful and pushed me on the right track!

I have continued with “trial & error” and finally got the job done. It was a little bit more tricky with Add To Cart button on the Product Detail page. I wasn’t aware of the form element!

I’ll share my own experience here, maybe it will help someone else. Especially if they use Oxygen builder to build custom templates and repeaters (loops) for Woocommerce pages.

1) ADD TO CART IN PRODUCT LISTS (e.g. Shop page, Category page, product’s repeater module in Oxygen)

– add class “product” on repeater module (or any other list/loop wrapper) and don’t use this same class on Add to cart button (this was my mistake!)
– I think this is optional, but I have used this code <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> to begin with my product card/container. This code adds a lot of additional classes that are connected to the looped post/product
– right after the upper code, you need to add this simple code <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>. Without it, GTM4WP can’t add its own code that is necessary to push data in dataLayer
– on Add to cart button, I have the following classes: button product_type_simple add_to_cart_button ajax_add_to_cart. It works for me, maybe it will for you. If not, try to take away some of them, but add_to_cart_button is a must!

2) ADD TO CART ON PRODUCT DETAILS PAGE (aka single product page)

– Thomas (the developer of this great plugin) has appointed me in the right direction -> I didn’t implement the Add to cart button 100% properly (even if it worked alright). I needed to add the additional code and it was all about adding the form element and the ATC button would go inside it. This is my code, please tweak it to your needs!

<?php

global $product;

$name = $product->get_name();
$price = ( $product->get_price() ) * 1.25; // tax addition
$url = get_permalink( $product->get_id() );
$image = $product->get_image('large');
$category = $product->get_categories(' ');
$id = $product->get_id();
$sku = $product->get_sku();

$category_terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $category_terms  as $category_term  ) {                    

            $product_cat_id = $category_term->term_id;              
            $product_cat_name = $category_term->name;            

            break;

        }

?>

<form class="cart my-own-product-form-element" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>

	<?php woocommerce_quantity_input(
			array(
				'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
				'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
				'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(),
			)
		);
	?>

	<a class="my-own-product-atc-button button single_add_to_cart_button product_type_simple add_to_cart_button ajax_add_to_cart" aria-label="Add “<?php echo $name; ?>” in cart." href="/?add-to-cart=<?php echo $id; ?>" value="<?php echo $id; ?>" rel="nofollow" data-quantity="1" data-product_id="<?php echo $id; ?>" data-product_sku="<?php echo $sku; ?>" item_id="<?php echo $sku; ?>" item_name="<?php echo $name; ?>" item_brand="" price="<?php echo $price; ?>" item_category="<?php echo $product_cat_name; ?>" quantity="1" google_business_vertical="retail" id="<?php echo $sku; ?>">
		?? ADD TO CART
	</a>

	<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>

</form>

Once again, thank you Thomas Geiger (@duracelltomi) for your help! ??