AMP Version of E-commerce Without Plugin: How to Hard Code It in Your WordPress Theme
As e-commerce continues to grow, providing a seamless and optimized experience for mobile users is crucial for driving conversions and improving overall customer satisfaction. One way to achieve this is by implementing an Accelerated Mobile Pages (AMP) version of your e-commerce website.
AMP is a web standard developed by Google that aims to improve the performance and user experience of web pages on mobile devices. By implementing AMP on your e-commerce site, you can enjoy faster load times, improved search engine visibility, and a more engaging mobile experience for your customers.
However, implementing an AMP version of your e-commerce website can be a complex task, especially if you don't want to rely on a plugin. In this blog post, we'll walk you through the steps to hard-code the necessary changes in your WordPress theme's functions.php
file to create an AMP-enabled e-commerce experience without the need for a plugin.
Step 1: Create a Metabox in the WooCommerce Product Post Type
The first step is to create a metabox in the WooCommerce product post type where users can enter the URL for the AMP version of the product page. To do this, we'll use the add_meta_box()
function in the functions.php
file of your WordPress theme.
function wc_49570125_register_meta_boxes() {
add_meta_box('meta-box-id', __('Mobile Version URL', 'yourtextdomain'), 'wc_49570125_my_display_callback', 'product');
}
add_action('add_meta_boxes', 'wc_49570125_register_meta_boxes');
In this code, we're creating a new metabox with the ID meta-box-id
and the title "Mobile Version URL" (which can be translated using the __()
function). The 'wc_49570125_my_display_callback'
function will be responsible for rendering the input field within the metabox.
Step 2: Add an Input Field to the Metabox
Next, we'll add an input field to the metabox where users can enter the URL for the AMP version of the product page.
function wc_49570125_my_display_callback($post) {
$get_id = $post->ID;
$get_value = get_post_meta($get_id, 'wc_mobile_version_url', true);
?>
<p>
<label><?php _e('Mobile URL to Redirect', 'yourtextdomain'); ?></label>
<input type="text" name="wc_mobile_version_url" value="<?php echo $get_value; ?>"/>
</p>
<?php
}
In this code, we're using the get_post_meta()
function to retrieve the value of the wc_mobile_version_url
custom field, if it exists. This value will be pre-populated in the input field for the user's convenience.
Step 3: Save the Input Field
Now, we need to save the value entered in the input field when the product is saved.
function wc_49570125_save_meta_box($post_id) {
$post_type = get_post_type($post_id);
if ('product' != $post_type) {
return;
}
if (isset($_POST['wc_mobile_version_url'])) {
$mobile_version = $_POST['wc_mobile_version_url'];
update_post_meta($post_id, 'wc_mobile_version_url', $mobile_version);
}
}
add_action('save_post', 'wc_49570125_save_meta_box');
This code checks if the current post type is a "product", and if so, it retrieves the value of the wc_mobile_version_url
field from the POST data and saves it using the update_post_meta()
function.
Step 4: Redirect Mobile Users to the AMP Version
Now that we have the AMP version URL saved for each product, we can use it to redirect mobile users to the AMP version of the product page.
function wc_49570125_mobile_redirect() {
global $product, $post;
if (is_product()) {
$get_id = $post->ID;
$amp_location = get_post_meta($get_id, 'wc_mobile_version_url', true);
if (wp_is_mobile() && $amp_location) {
wp_redirect($amp_location);
exit;
}
}
}
add_action('wp', 'wc_49570125_mobile_redirect');
This code checks if the current page is a product page and if the user is accessing the site from a mobile device. If both conditions are true, it retrieves the AMP version URL from the custom field and redirects the user to that URL using the wp_redirect()
function.
Step 5: Add a Discoverable Link for Google
To ensure that Google can properly index and display the AMP version of your product pages, you'll need to add a discoverable link in the <head>
section of your HTML.
function wc_49570125_amp_google_link() {
global $product, $post;
if (is_product()) {
$get_id = $post->ID;
$amp_location = get_post_meta($get_id, 'wc_mobile_version_url', true);
if ($amp_location) {
?>
<link rel="amphtml" href="<?php echo $amp_location; ?>"/>
<?php
}
}
}
add_action('wp_head', 'wc_49570125_amp_google_link');
This code checks if the current page is a product page and if the AMP version URL has been set. If both conditions are true, it outputs a <link>
tag in the <head>
section of the HTML, pointing to the AMP version of the product page.
By implementing these steps, you can create an AMP-enabled e-commerce experience on your WordPress website without the need for a plugin. This can help improve the performance and user experience for your mobile customers, leading to increased conversions and better search engine visibility.
If you're looking for a more comprehensive solution to identify and fix technical issues that may be impacting your website's conversion rates, consider using a tool like Flowpoint.ai. Flowpoint.ai uses AI to analyze your website's user behavior data and generate actionable recommendations to improve your website's technical performance, user experience, and content
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.