自定义WooCommerce类别视图

时间：2016-06-21 作者：ivancoene

我是WordPress开发的新手，我正在尝试制作一个插件，以便可以在列表中显示所有类别。

这样做的目的是定制默认视图

我希望你能理解并帮助我。

2 个回复

最合适的回答,由SO网友:Howard E 整理而成

如果您根据产品类别快捷码创建自己的快捷码

function duck_product_categories( $atts ) {
        global $woocommerce_loop;

        $atts = shortcode_atts( array(
            \'number\'     => null,
            \'orderby\'    => \'name\',
            \'order\'      => \'ASC\',
            \'columns\'    => \'4\',
            \'hide_empty\' => 1,
            \'parent\'     => \'\',
            \'ids\'        => \'\'
        ), $atts );

        if ( isset( $atts[\'ids\'] ) ) {
            $ids = explode( \',\', $atts[\'ids\'] );
            $ids = array_map( \'trim\', $ids );
        } else {
            $ids = array();
        }

        $hide_empty = ( $atts[\'hide_empty\'] == true || $atts[\'hide_empty\'] == 1 ) ? 1 : 0;

        // get terms and workaround WP bug with parents/pad counts
        $args = array(
            \'orderby\'    => $atts[\'orderby\'],
            \'order\'      => $atts[\'order\'],
            \'hide_empty\' => $hide_empty,
            \'include\'    => $ids,
            \'pad_counts\' => true,
            \'child_of\'   => $atts[\'parent\']
        );

        $product_categories = get_terms( \'product_cat\', $args );

        if ( \'\' !== $atts[\'parent\'] ) {
            $product_categories = wp_list_filter( $product_categories, array( \'parent\' => $atts[\'parent\'] ) );
        }

        if ( $hide_empty ) {
            foreach ( $product_categories as $key => $category ) {
                if ( $category->count == 0 ) {
                    unset( $product_categories[ $key ] );
                }
            }
        }

        if ( $atts[\'number\'] ) {
            $product_categories = array_slice( $product_categories, 0, $atts[\'number\'] );
        }

        $columns = absint( $atts[\'columns\'] );
        $woocommerce_loop[\'columns\'] = $columns;

        ob_start();

        if ( $product_categories ) {
            ?>
            <div class="woocommerce columns-<?php echo $columns;?>">
                <ul class="products alternating-list">
            <?php
            foreach ( $product_categories as $category ) {
                ?>
                <li class="product-category product first">
                    <a href="<?php echo get_category_link($category); ?>">
                        <?php
                             $thumbnail_id = get_woocommerce_term_meta( $category->term_id, \'thumbnail_id\', true );
                                $image = wp_get_attachment_url( $thumbnail_id );
                                if ( $image ) {
                                    echo \'<img src="\' . $image . \'" alt="" />\';
                                }
                            ?>
                     </a>
                </li>
                <li class="product-category product last"> 
                    <?php echo $category->name; 
                        echo \'<div class="shop_cat_desc">\'.$category->description.\'</div>\';
                    ?>
                </li>          
                <?php
            }

            woocommerce_product_loop_end();
        }

        woocommerce_reset_loop();

        return \'<div class="woocommerce columns-\' . $columns . \'">\' . ob_get_clean() . \'</div>\';
    }
add_shortcode(\'dd_product_categories\', \'duck_product_categories\');

然后添加此CSS：

.alternating-list li:nth-child(4n+3) {
    float: right !important;
}

当您调用快捷码时

【dd\\U product\\u categories number=“12”parent=“0”columns=“2”】

把columns=“2”放在那里，或者你可以把它硬编码到那里，如果你要这样做的话。

这包括图像侧面标题下的类别描述。像这样https://snag.gy/YVIBCl.jpg

SO网友:purnendu sarkar

<?php
                        $args = array( \'post_type\' => \'services_type\', \'posts_per_page\' => 4, \'services_cat\' => \'regenerative-sports-spine-and-spa\', \'orderby\' => \'date\', \'order\' =>\'ASC\');
                        $loop = new WP_Query( $args );
                        while ( $loop->have_posts() ) : $loop->the_post() ;global $product;  
                        $sliderurl = get_the_post_thumbnail_url( get_the_ID(), \'full\' );
                    ?>

                    <div class="box">
                        <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                        <div class="img"><img src="<?php echo $sliderurl;?>"></div>
                        <p><?php the_excerpt(); ?></p>
                        <h5><a href="<?php the_permalink(); ?>">Schedule Appointment Now</a></h5>
                    </div>

                 <?php endwhile; ?>
                <?php wp_reset_query(); ?>

标签： categories css woocommerce-offtopic 小码农

如何在编辑器中添加自定义CSS？

我已经为这件事挣扎了一段时间。我试图以列或块中的元素为目标，在本例中是WPForm的“提交”按钮。因此，我在Firefox中打开开发人员工具，选择我的元素并获取类名：<button type="submit" name="wpforms[submit]" id="wpforms-submit-863" class="wpforms-submit" data-alt-text="Sending..."

小码农CODE

自定义WooCommerce类别视图

相关推荐

如何在编辑器中添加自定义CSS？