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

Home Forums Support Prime Theme: How do I add Amazon prices (with popup showing date of price)

  • This topic has 14 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #999673
    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!

    #999793
    David
    Staff
    Customer Support

    Hi there,

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

    #999801
    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.

    #999803
    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 πŸ™

    #999842
    David
    Staff
    Customer Support

    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?

    #999910
    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.

    #999911
    David
    Staff
    Customer Support

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

    #999917
    Harry

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

    #999940
    David
    Staff
    Customer Support

    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?

    #1000174
    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.

    #1000191
    David
    Staff
    Customer Support

    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.

    #1000305
    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.

    #1000414
    David
    Staff
    Customer Support

    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.

    #1000655
    Harry

    Hi David,

    This worked a treat.

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

    Thank you so much!

    #1000693
    David
    Staff
    Customer Support

    Glad to be of help – and i am sure others will find this useful so thanks for asking πŸ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.