Question

我需要在使用Jupiter WordPress主题及其Shop Customizer的同时向我的商店单页添加自定义按钮。通常，我使用子主题来执行此操作，并覆盖其中的WooCommerce文件夹，但是由于它们具有自己的布局文件，因此无法做到这一点。

我可以用钩子在“添加到购物车”按钮下方添加自定义按钮吗？

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/

然后在“木星主题选项”的“自定义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主题的产品单页中添加自定义按钮？

1 个答案: