[Resolved] Prime Theme: How do I add Amazon prices (with popup showing date of price)

[Harry]

Hi,

I am using the prime theme. When you click on the product, I want to display the Amazon price, something like this:

Price: $89.95
(as of Aug 30,2019 06:16:01 UTC –

Details

)

When you hover over “details” I want the Amazon disclaimer to display. Or if you click on the “details” a pop up to appear with the disclaimer.

Help is much appreciated.

Thank you!

[David]

Hi there,

are you running Amazon Affiliate Products ? And the price/details you want to be displayed, are you intending to update this manually?

[Harry]

Hi David,

Yes the plan is to display Amazon Affiliate Products. I am trying to keep costs down so I will upload the products manually. I want to have the word “details” next to the price, this word will be clickable with a pop up disclaimer.

[Harry]

I can’t see how to do this within the Prime theme. My other alternative would be to rebuild the page with elementor and use a popup plugin for the text 🙁

[David]

So lets see if we can do the As of Date first.

Add this PHP snippet:

// Register Woo custom field - As of Date AOD

add_action( 'woocommerce_product_options_pricing', 'db_as_of_date_to_products' );      
 
function db_as_of_date_to_products() {          
	woocommerce_wp_text_input( array( 
		'id' => 'aod', 
		'class' => 'short', 
		'label' => __( 'As of Date', 'woocommerce' ),
		'data_type' => 'date', 
		) 
	);      
}
 
// 2. Save AOD field via custom field
 
add_action( 'save_post_product', 'db_save_aod' );
 
function db_save_aod( $product_id ) {
	global $pagenow, $typenow;
	if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if ( isset( $_POST['aod'] ) ) {
		if ( $_POST['aod'] )
   			update_post_meta( $product_id, 'aod', $_POST['aod'] );
	} else delete_post_meta( $product_id, 'aod' );
}
 
// Display AOD field @ single product page below price
 
add_action( 'woocommerce_single_product_summary', 'db_display_aod', 15 );
 
function db_display_aod() {
	global $product;
	
	if ( $product->get_type() <> 'variable' && $aod = get_post_meta( $product->get_id(), 'aod', true ) ) {
		echo '<div class="woocommerce_aod">';
		_e( 'As of ', 'woocommerce' );
		echo '<span>' .  $aod . '</span>';
		echo '</div>';
	}
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

This will add a field named As of Date to the woo product and display it with the prefix of ‘As of’ below the single product price.

If that works we can look at adding the Details. Will all your products be Amazon affiliates?

[Harry]

Hi David,

Thank you for the reply. I downloaded the code snippets, copied the code exactly and clicked the option to run the snippet everywhere but no luck 🙁

At the moment I will just be using Amazon Affiliates.

[David]

When you edit the Product does the “As of Date” field appear below the pricing?

[Harry]

My apologies, it did work! I saw it under product data > general. I can then enter the date, wonderful!

[David]

Right now you can style it with some CSS, reduce the margin below the price and add it to the bottom of the AOD and make the font smaller etc.

.woocommerce div.product p.price {
    margin-bottom: 0.25em;
}
.woocommerce_aod {
    margin-bottom: 1.5em;
    font-size: 14px;
}

To change the prefix to the date – in the PHP i provided above, last function look for this:
_e( 'As of ', 'woocommerce' );

And change As of to whatever you want.

For the Details – is this going to be the same for all products?

[Harry]

Hi David,

Thank you for the help! Yes, the details will be the same for all the products.

Price: $89.95
as of Aug 30,2019 06:16:01 UTC –Details

When you hover or click on the Details the same disclaimer for all the products will show.

[David]

Could do something like this:

1. Make sure you have the Elements Module on, then Appearance > Elements > New > Hook.
2. Add this for the content and update your disclaimer:

<div class="amz-disclaimer">
	<a id="reveal">Details</a>
	<div class="amz-details">
		ADD YOUR DISCLAIMER HERE
	</div>
</div>
<style>
	.amz-disclaimer #reveal {
		cursor: pointer; 
	}
	.amz-details {
		display: none;
		padding: 10px 10px 1em 10px;
	}
</style>
<script>
	jQuery(document).ready(function($) {
    $( "#reveal" ).click(function() {
        $( ".amz-details" ).slideToggle( "medium", function() {
            // Animation complete.
        });
    });  
});
</script>

3. Select the woocommerce_single_product_summary hook
4. Set the Priority to 15
5. Set your display rules to Products > All Products

You may want to think about adding a Product Category or Tag to non Amazon products then you can exclude them from this element.

[Harry]

Hi David,

This works perfectly. If you look at the “Beanie” product on my site. To get rid of the increase or decrease product, I added the css:

.woocommerce div.product form.cart div.quantity {

display: none;
}

And changed the add to cart to “buy from Amazon”. However the “Details” looks out of place, can I put this inline with the: As of Aug 18,2019 06:16:01 UTC Details, and same font size as the date. Or below and spaced evenly with the button? This would look the same for every product. What do you think is best?

Thank you so much.

[David]

Issue with placing the Details inline ( using this toggle reveal method ) is that when you open it the ‘details’ link will fall below the date.

So could do this:

1. In the <style> CSS here change:

padding: 10px 10px 1em 10px; to padding: 10px 0 1em;

2. Remove this CSS:

.woocommerce_aod {
    margin-bottom: 1.5em;
    font-size: 14px;
}

and add:

.woocommerce_aod, .amz-disclaimer {
    font-size: 14px;
}
.woocommerce-variation-add-to-cart {
    margin-top: 1.5em;
}

This will format the Detail the same as the AOD and right below it.

[Harry]

Hi David,

This worked a treat.

Your support has been outstanding and I am so happy with the result.

Thank you so much!

[David]

Glad to be of help – and i am sure others will find this useful so thanks for asking 🙂

[Author]

Posts