小编cle*_*ruz的帖子

AJAX添加到购物车按钮不工作自定义查询循环产品woocommerce

我正在使用woocommerce建立一个自定义电子商务网站,我在修复"添加到购物车按钮"时遇到了一些麻烦.每当我在输入框/数量框中添加多个金额时,它只会增加或添加一个项目到购物车.这只在我创建自定义循环时发生.

在商店和单品页面上,它工作正常.如果我添加10个项目并按添加到购物车按钮.它确实添加了10个项目到购物车.

这是我一直在工作的模板.

<?php

/*
* Template Name: Home
*/

get_header(); ?>

<section class="full-width home-template">

    <div class="full-width shop-section">

        <div class="container">

            <?php
            $args = array(
                    'post_type' => 'product',
                    'meta_query' => array(
                        array(
                            'key' => '_stock_status',
                            'value' => 'instock'
                        )
                    )
            );

            $crate_products = new WP_Query ( $args );
            if ( $crate_products->have_posts() ) : while ( $crate_products->have_posts() ) :
              $crate_products->the_post();

            ?>

            <div id="post-<?php the_ID() ?>" class="three columns product-post">

                <?php // wc_get_template_part('content', 'product'); ?>


                <figure class="featured-image">
                    <?php
                    //Display Product Thumbnail
                    $product_thumbnail =  woocommerce_get_product_thumbnail(); …
Run Code Online (Sandbox Code Playgroud)

php ajax loops woocommerce

17
推荐指数
1
解决办法
2528
查看次数

在最近的订单模板和管理订单(woocommerce)上显示产品发布类型高级自定义字段

我正在尝试显示我在最近的WooCommerce订单模板中创建的字段,而且我对PHP不是很了解.

我创建了一个名为sessions的字段并注册为产品发布类型.一旦用户购买了产品,我希望那些海关字段"会话"值显示在我的帐户>最近订单(模板)中.

我试着寻找答案和解决方案,但我似乎陷入困境.

这是我一直在研究的my-order.php模板的自定义代码.我已经黑了几天了,似乎无法在我最近的订单表中显示这些值.

更新 - 添加图像和更多描述,以澄清我的问题

1.)正如你在这里看到的,我创建了两种类型的字段并将它们注册为产品发布类型

在此输入图像描述

2.)然后我在我创建的那两个字段上放置了一个值

在此输入图像描述

3.)用户或客户购买物品/产品/包装后.我希望这两个值显示在"会话"列下用户my-account模板的最近订单上

在此输入图像描述

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array(
    'order-number'   => __( 'Package', 'woocommerce' ),
    'sessions'       => __( 'Session', 'woocommerce' ),
    'order-total'    => __( 'Package Prize', 'woocommerce' ),
    'order-date'     => __( 'Date', 'woocommerce' ),
    'order-end-date' => __( 'End Date', 'woocommerce'),
    'order-status'   => __( 'Status', 'woocommerce' ),
    'order-actions'  => '&nbsp;',
) );

$customer_orders = get_posts( apply_filters( 'woocommerce_my_account_my_orders_query', …
Run Code Online (Sandbox Code Playgroud)

php wordpress wordpress-plugin woocommerce advanced-custom-fields

14
推荐指数
1
解决办法
1223
查看次数

使用滑动事件同步方向控件

我已经构建了两种功能来控制我构建的滑块.一个是带方向控制的按钮,另一个是触摸/滑动事件.如何同步它们,以便当我按上一个/下一个时,滑动事件也会更新,反之亦然

$(document).ready(function() {


	$('.prev').on('click', function(e) {
	    event.stopPropagation();
	    // store variable relevent to clicked slider
	    var sliderWrapper      = $(this).closest('.slider-wrapper'),
		    slideItems         = sliderWrapper.find('.slide-items'),
	        slider             = sliderWrapper.find('.slider'),
	        currentSlide       = sliderWrapper.attr('data-slide');

	    // Check if data-slide attribute is greater than 0
	    if( currentSlide > 0 ) {
			// Decremement current slide
			currentSlide--;
			// Assign CSS position to clicked slider
			slider.css({'right' : currentSlide*slideItems.outerWidth() });
			// Update data-slide attribute
			sliderWrapper.attr('data-slide', currentSlide);
	    }
	});

	$('.next').on('click', function(e) {
	    event.stopPropagation();
	    // store variable relevent to clicked slider

		var sliderWrapper      = …
Run Code Online (Sandbox Code Playgroud)

javascript jquery swipe hammer.js

12
推荐指数
1
解决办法
451
查看次数

当woocommerce产品中没有内容时隐藏自定义选项卡

如果字段框中没有内容,有没有办法隐藏自定义选项卡。我正在使用高级自定义字段插件来实现这一点。到目前为止,即使没有放置内容,该选项卡仍然存在

这是我放在我的functions.php中的代码

add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

// Adds the new tab

    $tabs['direction_tab'] = array(
        'title'     => __( 'Direction', 'woocommerce' ),
        'priority'  => 60,
        'callback'  => 'woo_new_direction_tab_content'
    );

    return $tabs;

}


function woo_new_direction_tab_content() {

    // The new tab content

    echo the_field('directions');

}
Run Code Online (Sandbox Code Playgroud)

更新

//Direction Tab
add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

// Adds the new tab

    $tabs['direction_tab'] = array(
        'title'     => __( 'Direction', 'woocommerce' ),
        'priority'  => 60,
        'callback'  => 'woo_new_direction_tab_content'
    );


    return …
Run Code Online (Sandbox Code Playgroud)

html php wordpress function woocommerce

9
推荐指数
2
解决办法
7261
查看次数

滑动或单击滑块控件时旋转木马滑动不正确(下一个/上一个)

我刚刚完成了一个我正在研究的旋转木马,它使用了滑动/触摸,还使用了prev/next等控件来控制旋转木马.现在我有关于旋转木马行为的问题.基本上我正试图让它一个接一个地滑动.以下是我一直在研究的代码示例.现在它似乎滑动了2或3,这取决于我放置了多少个旋转木马.

我也有一个关于使其响应的问题

function fCarousel() {
  // var activeSlide = 0;
  // $('.faculty-carousel').attr('data-slide', '0');

  var viewPortSize        = $(window).width(),
      facultyPanel = $('.faculty-carousel .faculty-items li'),
      profileCount = facultyPanel.length,
      activeSlide         = 0,
      carousel            = $('.faculty-carousel .faculty-items');

  $('.faculty-carousel').attr('data-slide', '0');

  //Set Panel Size based on viewport

  if (viewPortSize <= 1920 ) {
      var profilePanelSize = viewPortSize / 5
  }

  if (viewPortSize < 1024 ) {
      var profilePanelSize = viewPortSize / 4
  }

  if (viewPortSize < 768 ) {
      var profilePanelSize = viewPortSize / 3
  } 

  if …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery hammer.js

8
推荐指数
1
解决办法
1061
查看次数

使用onclick事件关闭hammer.js触摸事件

我刚刚为我正在建设的网站构建了带有触摸事件的旋转木马滑块.目前正试图找出如何(hammer)使用点击事件禁用触摸事件.这是我一直在研究的代码

该类.slider-layout启用轮播,同时类.tile-layout禁用轮播并在卡视图布局中转换布局


更新#1

我尝试删除绑定hammer.js但没有工作的类.

var activeSlide = 0;
    $('.faculty-carousel').attr('data-slide', '0');
    
    
    
    $('.tile-layout').on('click', function() {
        $('.faculty-items').each(function() {
            $(this).addClass('tile-view');
        })
    })
    
    
    $('.prev').on('click', function(e) {
        event.stopPropagation();
    
        var carouselWrapper     = $(this).closest('.faculty-carousel'),
            facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
            facultyProfileCount = facultyProfilePanel.length,
            viewPortSize        = $(window).width(),
            carousel            = carouselWrapper.find('.faculty-items'),
            position            = 0,
            currentSlide        = parseInt(carouselWrapper.attr('data-slide'));
    
        // Check if data-slide attribute is greater than 0
        if (currentSlide > 0) {
            // Decremement current slide
            currentSlide--;
            // Assign CSS position to clicked slider
            var transformPercentage = …
Run Code Online (Sandbox Code Playgroud)

javascript jquery touch hammer.js

7
推荐指数
1
解决办法
402
查看次数

显示特定产品类别的术语或产品属性(woocommerce)

我一直在研究关于我的问题的网络和论坛,但我似乎无法产生正确的结果.基本上我只想显示特定产品类别的术语或产品属性.

这是我一直在研究的代码.

<fieldset class="liquor-types-control filter-controls" >

    <?php 

    $terms = get_terms( 'wine', /*<--Product Category */ 'pa_liquor-types' /* <--Product Attribute */);
    foreach ( $terms as $term ) :
    ?>

    <label> 
        <input type="checkbox" value="<?php echo "." . $term->slug ?>"  /> 
        <?php echo $term->name ?>
    </label>

    <?php endforeach; ?>


</fieldset>


(
    [errors] => Array
        (
            [invalid_taxonomy] => Array
                (
                    [0] => Invalid taxonomy.
                )

        )

    [error_data] => Array
        (
        )
)
Run Code Online (Sandbox Code Playgroud)

php loops woocommerce taxonomy-terms

6
推荐指数
2
解决办法
1991
查看次数

如何在特定视口上设置触摸手势/ hammer.js?

我刚刚为我正在建设的网站构建了带有触摸事件的旋转木马滑块.目前正在尝试弄清楚如何激活或禁用(hammer)特定视口上的触摸事件.基本上一旦它到达移动/平板电脑视口.Hammer.js将禁用滑块的禁用点击控件

var activeSlide = 0;
    $('.faculty-carousel').attr('data-slide', '0');
    
    
    
    $('.tile-layout').on('click', function() {
        $('.faculty-items').each(function() {
            $(this).addClass('tile-view');
        })
    })
    
    
    $('.prev').on('click', function(e) {
        event.stopPropagation();
    
        var carouselWrapper     = $(this).closest('.faculty-carousel'),
            facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
            facultyProfileCount = facultyProfilePanel.length,
            viewPortSize        = $(window).width(),
            carousel            = carouselWrapper.find('.faculty-items'),
            position            = 0,
            currentSlide        = parseInt(carouselWrapper.attr('data-slide'));
    
        // Check if data-slide attribute is greater than 0
        if (currentSlide > 0) {
            // Decremement current slide
            currentSlide--;
            // Assign CSS position to clicked slider
            var transformPercentage = -1 * currentSlide / facultyProfileCount * 100; …
Run Code Online (Sandbox Code Playgroud)

html javascript css hammer.js

6
推荐指数
1
解决办法
443
查看次数

循环显示星级

我想弄清楚如何将产品页面上显示的星级评分输出到循环中。这是我试图将星星输出到循环中的代码

<div class="product-rating">
    <?php echo '<div class="star-rating" title="'.sprintf(__( 'Rated %s out of 5', 'woocommerce' ), $average).'"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div>'; ?>
</div>
Run Code Online (Sandbox Code Playgroud)

现在该产品只显示文本,并没有输出正确的评级。我已经给它一个测试评级,它只显示“满分 5” 这是帖子的截图

http://i255.photobucket.com/albums/hh140/testament1234/product_zpsaf2b219a.jpg

<ul class="products eight columns">
<?php
    $args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => 'Lumiere', 'orderby' => 'rand' );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

            <li class="product product-items …
Run Code Online (Sandbox Code Playgroud)

html css php wordpress woocommerce

5
推荐指数
1
解决办法
5438
查看次数

缩放父元素,但删除子元素的缩放

我正在使用一些css动画scale.有没有办法限制子元素不按比例缩放,只有父元素才会缩放.

.scale {
    max-width : 200px;
    height : 200px;
    background-color : beige;
    -webkit-transition: transform 0.3s linear;
    -webkit-transform-origin : top left;
}

.scale:hover {
    -webkit-transform : scale(2.0);
    -webkit-transition: transform 0.3s linear;
 }
 
.scale:hover .dont-scale {
    -webkit-transform : scale(1.0);
}
Run Code Online (Sandbox Code Playgroud)
<div class="scale">
    <div class="dont-scale">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>    
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
1852
查看次数