小编Cra*_*ray的帖子

我正在使用光滑的滑块显示很多滑块项目。我还需要使用点来显示项目的位置。目前，有很多点，我想像instagram一样显示这些点。

这是我的意思：

始终应最多可见6个点。从左侧的第一个开始。

有没有办法解决中间的四个点？目前，我只能通过class来访问活动点slick-active。但是我需要活动点之前和之后的点。

这是我实际的滑块代码：https : //codepen.io/cray_code/pen/ZrKpWY

我为我的 WooCommerce 商店建立了一个自己的主题。目前我对现有的模板文件做了很少的改动。

但我想更改产品页面上图像滑块的视图。目前，我正在使用带有一些基本样式的基本输出。

问题是，如果单行中没有合适的缩略图，则缩略图会显示在多行中。

我需要的是缩略图的滑块。我试图更改模板文件product-thumbnails.php。但它使用了一个名为wc_get_gallery_image_html. 我不知道如何以一种好的方式改变它。

然后我意识到 WooCommerce 使用了 FlexSlider 插件。这个插件可以提供我想要/需要的东西。

见这里： http : //flexslider.woothemes.com/thumbnail-slider.html

我只是不知道，如何将这种行为添加到我的产品图片滑块中。

我看到上面的示例中有一个示例 JS 和 HTML 代码。但我不知道如何将它适应我的滑块，因为我的 HTML 输出看起来有很大不同，重命名 ID 不起作用。

编辑：

我找到了一种向滑块添加选项的方法。答案来自这里：https : //stackoverflow.com/a/46448407/1788961

我添加了以下代码（并且它正在运行）为我的滑块添加选项：

// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;
    $options['sync'] = '.flex-control-thumbs';

    return $options;
}

问题是，我还需要为缩略图添加选项。有没有办法做到这一点？

目前 HTML 输出如下所示：

<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out;">
    <a href="[path]" class="woocommerce-product-gallery__trigger"></a>
    <div class="flex-viewport" …

我想点击一个链接时打开一个模态.不幸的是我无法更改链接的HTML.我只能改变内容href.

像这样:

<a href="#Modal">Open modal</a>

我无法添加数据属性或任何其他HTML.

在文档中,我找到了一种通过JavaScript打开模态的方法.我将此代码添加到我的网站:

$('#Modal').modal();

它可以工作,但模式在页面加载后立即打开.点击链接后我需要打开它.

有没有办法做到这一点？

这是我的模态:

<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="ModalTitle">Modal Title</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                Content
            </div>
        </div>
    </div>
</div>

我正在使用Bootstra 4选项卡导航,如下所示:

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

      <a href="">LINK TO THIRD TAB</a>

  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

我现在想要使用第一个选项卡内容窗格中的链接从第一个窗格外部打开第三个链接窗格.

如果我正在使用选项卡导航中的链接(带有数据属性),则它不起作用.有没有办法用第二个链接打开标签？

我想更改相关产品的标题文本并删除<h2>SEO 原因。

我在这里找到了一些更改标题文本的答案：在 Woocommerce 3 中重命名相关产品标题 但是那里的代码和答案不起作用（不再？）。

还有一个问题。标题使用了<h2>我也想更改的标签。

我在模板中找到了以下代码related.php：

<?php
$heading = apply_filters( 'woocommerce_product_related_products_heading', __( 'Related products', 'woocommerce' ) );

if ( $heading ) : ?>
    <h2><?php echo esc_html( $heading ); ?></h2>
<?php endif; ?>

有没有办法在$heading不更改模板文件的情况下改变完整的输出？

我想向 WooCommerce 中的订单项目添加一些元数据。这些元字段仅供内部使用，不应可见。

我们的产品中有一些额外的字段，例如额外费用。我想在导出订单后使用该费用进行处理。

我在这里找到了一个非常好的答案：https ://stackoverflow.com/a/41988701/1788961

add_action('woocommerce_checkout_create_order_line_item', 'add_custom_hiden_order_item_meta_data', 20, 4 );
function add_custom_hiden_order_item_meta_data( $item, $cart_item_key, $values, $order ) {

    // Set user meta custom field as order item meta
    if( $meta_value = get_user_meta( $order->get_user_id(), 'billing_enumber', true ) )
        $item->update_meta_data( 'pa_billing-e-number', $meta_value );
}

但在此示例中，元字段中的内容将显示在客户的订单详细信息中。

有没有办法使这些字段仅在后端可见并可用于内部功能？

我正在使用代码片段覆盖 YoastSEO for WordPress/WooCommerce 中的规范 URL。该片段基于官方文档示例：https ://developer.yoast.com/features/seo-tags/canonical-urls/api/

这是我的代码：

function prefix_filter_canonical_example( $canonical ) {
 
    if (is_shop() && is_paged() ) :
 
        $canonical = get_permalink(woocommerce_get_page_id( 'shop' )).'page/'.get_query_var('paged').'/';
    
    elseif(WCV_Vendors::is_vendor_page()):
    
        $vendor_shop = urldecode( get_query_var( 'vendor_shop' ) );
        $vendor_id   = WCV_Vendors::get_vendor_id( $vendor_shop );
        $canonical  = WCV_Vendors::get_vendor_shop_page( $vendor_id );
    
    endif;
    
    return $canonical;
    
}   
add_filter( 'wpseo_canonical', 'prefix_filter_canonical_example' );

无论我返回什么内容，代码都不会对规范 URL 执行任何操作。但 if/else 工作正常，如果我回显内容，$canonical我会看到正确的 URL。

我已经尝试过基本的店面主题，并且停用了几乎所有插件。但该片段不起作用。有什么我想念的吗？

我想更改 WooCommerce FlexSlider 以使用图库中的点而不是缩略图。但在桌面上我想显示缩略图。

我找到了一个使用点或缩略图的解决方案，但不是在不同的视口中同时使用它们。

以下是我使用缩略图所做的操作：

add_filter( 'woocommerce_single_product_carousel_options', 'custom_update_woo_flexslider_options' );
function custom_update_woo_flexslider_options( $options ) {

    $options['controlNav']      = 'thumbnails';
    
    return $options;
}

对于点，我将代码更改为：

    $options['controlNav']      = true;

但在这种情况下，我必须对所有视口使用其中之一。

有什么办法可以同时使用两者吗？或者每个视口一个？

我想为订单超过 50 美元的顾客提供免费礼物。如果购物车中有特定产品，则不会（stackoverflow 和下面有一些示例）。

经过一番研究后，我发现以下代码可以在将另一个特定产品添加到购物车时添加免费产品。

add_action( 'template_redirect', 'bbloomer_add_gift_if_id_in_cart' );
 
function bbloomer_add_gift_if_id_in_cart() {
 
   if ( is_admin() ) return;
   if ( WC()->cart->is_empty() ) return;
 
   $product_bought_id = 32;
   $product_gifted_id = 57;
 
   // see if product id in cart
   $product_bought_cart_id = WC()->cart->generate_cart_id( $product_bought_id );
   $product_bought_in_cart = WC()->cart->find_product_in_cart( $product_bought_cart_id );
 
   // see if gift id in cart
   $product_gifted_cart_id = WC()->cart->generate_cart_id( $product_gifted_id );
   $product_gifted_in_cart = WC()->cart->find_product_in_cart( $product_gifted_cart_id );
 
   // if not in cart remove gift, else add gift
   if ( ! $product_bought_in_cart ) {
      if ( …

我使用Swiper来显示一年中每个月的滑块。它从左向右滑动。

我现在想从左侧的当前月份开始。如果之前有月份，则它们应该位于左侧偏移中。

我试图给.swiper-slide班级提供活跃班级.swiper-slide-active：

<div class="swiper-slide swiper-slide-active">

但这是行不通的。

在文档中，我发现没有参数可以在设置中设置活动幻灯片。有什么办法可以做到这一点吗？

这是我当前的代码： https://codepen.io/cray_code/pen/dydrLBP

var swiper = new Swiper(".swiper-months", {
    cssMode: false,
    slidesPerView: 3.5,
    spaceBetween: 16,
    activeIndex: 6,
    mousewheel: {
        forceToAxis: true,
    },
});

也activeIndex: 6不起作用。我不确定这是否正确。