在WooCommerce添加产品视频代替图片
WooCommerce 不允许您添加产品视频，但是我们可以用几行代码添加它，不需要第三方插件。 WooCommerce 产品图片用于说明您的产品，但有些产品需要视频才能更好地展示它们。在这里，我将向您展示如何使用一个简单的 PHP 代码片段将图像替换为响应式 YouTube 视频。
您可以在“functions.php”或Snippet插件中添加此代码。
add_action( 'woocommerce_before_single_product', 'priyan_sh_video_not_image' );
function priyan_sh_video_not_image() {
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
add_action( 'woocommerce_before_single_product_summary', 'priyan_sh_product_video', 30 );
}
//最模板 https://www.zuimoban.com/woocommerce/tutorials/72.html
function priyan_sh_product_video() {
echo '<div class="woocommerce-product-gallery">';
if ( $video = get_post_meta( get_the_ID(), 'product_video_field', true ) ) {
//URL Match
preg_match('%(?:youtube(?:-nocookie)?.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu.be/)([^"&?/ ]{11})%i', $video, $match);
// Display Video
echo '<div class="images"><div class="ResponsivevideoWrapper">';
echo '<iframe width="1200" height="1000" src="https://www.youtube.com/embed/'.$match[1].'?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>';
echo '</div></div>';
} else {
// No Video
wc_get_template( 'single-product/product-image.php' );
}
}
为了让它工作，我们必须在每个产品页面的自定义字段部分创建一个“ product_video_field ”，以便在每次添加新产品时为我们提供一种添加 YouTube URL 的简单方法。
单击“输入新”并键入“ product_video_field ”，然后单击“添加自定义字段”。在值字段中，输入所需的 YouTube 视频链接。该链接可以是任何格式，因为代码将匹配并在“ /watch?v= thiscode ”之后提取代码。
然后点击“发布”发布产品。如果您检查您的产品页面，您会发现视频不合适。我们需要通过 CSS 添加响应式设计元素。
导航到“外观 > 自定义 > 附加 CSS”。然后输入以下代码。您可以根据您想要的外观进行修改。
.ResponsivevideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.ResponsivevideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
然后单击“发布”以保存更改。您现在可以看到 YouTube 视频代替您的产品图片。产品图片仍将显示在“商店”页面中，因此您还必须在每个产品中添加图片。
所以我们开始了，一个完全响应的产品视频代替产品图像，没有插件或第三方工具。
相关文章
变量$order获取WooCommerce订单信息
在WooCommerce我怎样才能得到订单总额或者我怎样才能得到订单物品或者可能是订单 ID、客户 ID、账单信息、付款方式、总退款等等，使用变量$order可以获取。可能有 $order_id 可用。在这种...
2022-04-15使用$product获取WooCommerce产品信息ID、S
在WooCommerce中，使用变量$product 如何获取产品 SKU或者我怎样才能得到产品的简短描述或者可能是产品库存水平、运输等级、税收等级、价格、正常价格、销售价格等等.并非总是可以访问...
2022-04-15在WooCommerce列表页显示商品品牌
安装好WooCommerce Brands 插件网站将显示品牌分类，商品也会出现品牌链接，但是商品列表页如何也显示商品品牌呢？仅将这些添加到单个产品页面中。 在woomcomerce当中添加以下代码： ad...
2022-04-15在WooCommerce添加产品视频代替图片
WooCommerce 不允许您添加产品视频，但是我们可以用几行代码添加它，不需要第三方插件。 WooCommerce 产品图片用于说明您的产品，但有些产品需要视频才能更好地展示它们。在这里，我将...
2022-04-04重命名WooCommerce产品选项卡里的附加信息
系统WooCommerce产品选项卡里的附加信文字一般为Additional information，意思附加信息，但是我们可能需要修改成产品规格，文字Specifications，使用插件太过冗余，直接采用以下代码片段： a...
2022-04-04WooCommerce启用PayPal Standard标准版
WooCommerce一次次升级把PayPal Standard标准版给隐藏了，推荐用高级版，对于广大外贸独立站来说，使用高级企业版就不能提现到个人账户了，我们需要PAYPAL标准版，这里最模板提供代码如下...
2022-04-04当WooCommerce订单金额超过1000隐藏paypal
在当WooCommerce当中我们使用最多的支付工具是paypal，但是手续费太高了，4.4%加提现35美金，对于我们广大独立站来说，利润太薄了，若是出现一个更大的订单，超过1000，一下子就收走了...
2022-04-04控制WooCommerce在产品页标签数量
如果您使用 WooCommerce 产品标签，一个产品可能属于其中的 10 个或更多。发生这种情况时，单个产品页面会显示一长串标签链接，这可能会占用太多空间（请参阅下面的屏幕截图以可视化...
2022-03-28显示WooCommerce选定的变化信息如价格、重
让我们访问WooCommerce变体 ID。如果我需要读取变化价格、库存数量、SKU、重量等怎么办？那么，在这种情况下，我们需要不同的代码。...
2022-03-28变量$cart获取WooCommerce购物车信息总数、
怎样才能得到WooCommerce购物车总数或者怎样才能显示WooCommerce购物车商品或者可能是购物车费用、申请的优惠券、购物车内容总量、总重量等等，这里使用$cart 变量. 1. 如果您可以访问 ...
2022-04-15