如何在 Jupiter 主题中向我的产品单页添加自定义按钮？

Question

我需要在使用 Jupiter WordPress 主题及其 Shop Customizer 时向我的商店单页添加自定义按钮。通常，我使用子主题并覆盖其中的 WooCommerce 文件夹，但由于它们有自己的布局文件，我不能这样做。

有什么方法可以在带挂钩的 "Add to Cart" 按钮下方添加自定义按钮吗？

Answer 1

为此，首先您需要启用您的子主题，然后将此代码添加到 jupiter-child/functions。php:

add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
  global $product;
  echo '<div class="mk-button-container _ relative custom_shop_button block text-center ">
<a href="#LINK_TO_WHAT_YOU_WANT" target="_self" class="mk-button js-smooth-scroll mk-button--dimension-three mk-button--size-medium mk-button--corner-pointed text-color-light _ relative text-center font-weight-700 no-backface letter-spacing-1 inline"><span class="mk-button--text">Link Text</span></a>
</div>';
}

全局 $product 变量 可让您获取产品详细信息。有关详细信息，请查看：https://docs.woocommerce.com/document/class-reference/

然后在 Jupiter 主题选项的自定义 CSS 部分添加此 CSS：

.custom_shop_button .mk-button, .custom_shop_button .mk-button:active {
    box-shadow: 0px 3px 0px 0px #b31913;
    margin-bottom: 3px;
}
.custom_shop_button .mk-button {
    background-color: #e01f18;
    color: #fff!important;
}
.custom_shop_button .mk-button {
    background-color: #e01f18;
}
.custom_shop_button .mk-button {
    display: inline-block;
    max-width: 100%;
}



@media screen and (min-width: 768px )
{
    .custom_shop_button {
    display: block;
    float: right;
    width: 50%;
    clear: both !important;
    margin-top: 57px;
}

.woocommerce div.product form.cart, .woocommerce-page div.product form.cart {
    width: 50%;
    display: inline-block;
}
}
@media screen and (max-width: 768px )
{
    .custom_shop_button {
    width: 100%;
    clear: both !important;
    text-align: left;
}

.woocommerce div.product form.cart, .woocommerce-page div.product form.cart {
    width: 50%;
    display: inline-block;
}
}

希望对您有所帮助:)

如何在 Jupiter 主题中向我的产品单页添加自定义按钮？

How can I add a custom button to my product single page in Jupiter theme?

wordpress

hook

woocommerce