专注于外贸建站,分享WordPress建站和Elementor教程

工业机械 | B2B外贸模板网站安装包

998.00¥ 599.00¥

什么是WordPress外贸模板网站?

外贸模板网站是基于WordPress制作的,它不同于WordPress主题的模板,主题模板侧重于设计,安装主题的模板后还需要自行摸索各种功能的配置,譬如:产品页面加询盘功能、询盘表单配置、询盘邮件通知、安全防护、速度优化、安装GA代码等等。

WordPress外贸模板网站是一个完整的外贸站点,它是基于我的外贸建站经验总结出来直径解决方案,不需要你再去研究插件选型,反复尝试插件配置是否有效。

它已经覆盖了网站速度优化、安全防护、页面编辑、页面设计等方面内容,包含了所需的主题、插件、页面、示例文章/产品、必需功能的插件组合配置以及配套使用教程。

总结而言,它是一条外贸网站建设的直径。

外贸模板网站适合谁?

外贸事业起步阶段 + 有耐心和毅力学习WordPress建站的外贸人。

模板站我准备好了,你需要做的是:按下文提供的教程去安装模板、配置部分插件的设置(譬如询盘的邮箱)、内容编辑上传。

如果你只想做内容编辑,需要我提供下方讲解的模板安装、插件功能配置,以便节约你的学习时间,那么你可能需要:外贸网站模板建站服务

如何安装模板网站

使用All-In-One WP Migration插件安装模板网站,需要你安装一个全新的空白WordPress,避免模板站与已有内容的冲突。

如何在你的网站主机上创建WordPress网站?请查看下方的教程

创建完空白wordpress网站后,请安装插件All-in-One WP Migration,安装完成后激活它。

然后从网站后台进入插件的Import功能页面,点击import from并选择file,然后上传模板网站安装包。

在下图中能看到最大文件上传大小是125MB,而模板网站的安装包在200MB+,此时,请直接安装All-in-One WP Migration File Extension的Basic插件 ,并启用它,这样上传限制会增大到512M。

all in one wp migration tutorial 5

接下来静待文件包上传完成,如果上传速度很慢,①请尝试调整你的VPN节点;②主机做了限速,你需要联系主机商沟通此事宜,我推荐的WordPress主机全都通过了我的上传测试。

all in one wp migration tutorial 6

当安装包导入完成后,你将看到下图,此时点击Proceed执行导入,静待完成后,网站即导入成功。

all in one wp migration tutorial 7

接下来,前往数据库修改账号和密码,因为安装包里默认是我的账号与密码信息。

请登录主机的管理面板,找到数据库的管理入口按钮,通常是phpmyadmin。

Siteground主机为例,在Sitetools中,进入左侧菜单:Site>MySQL,就能找到数据库管理入口。

change your wordpress password in the database

如果你用的主机是Cpanel面板(譬如GreenGeeks、Chemicloud),在面板首页中就能找到phpmyadmin按钮。

cpanel面板的phpmyadmin入口

进入数据库后,在左侧点击数据库,右侧则会出现这个数据库的全部数据表,你可以输入关键词user去搜索用户表,找到用户表之后,点击它的标题。

change your wordpress password in the database

进入用户表后,你将看到用户数据,点击编辑按钮。

change your wordpress password in the database

进入编辑页面后,如下图所示,找到用户登录信息(user_login、user_email)和密码信息进行修改,密码要记得选md5,下图中最后一个display_name也可以修改一下,它也能在WordPress后台修改,修改完成后,点击右下角的go按钮提交即可。

change your wordpress password in the database

请使用修改后的邮箱、密码登录。WordPress后台的登录地址通常是:域名/wp-admin/,相关教程:如何找到Wordpress登录网址(4种方法)

如何编辑网站内容

外贸建站过程中,添加搜索过滤器能够为用户提供便捷和提高满意度。本文中,我们在网上搜集了WordPress的最佳搜索过滤插件,并介绍了它们的优缺点及使用指南。

当一个网站上的产品和文章越多,浏览起来就越困难,对于房地产、电商和餐馆列表等网站来说尤其如此。

想象一下,您正在网上浏览本地的餐馆名单,以便找到一家披萨店。如果你不得不单独浏览每一家餐馆的列表去查看是否提供披萨、服务好不好、价格如何,那这个过程是令人崩溃的,然而,通过搜索过滤功能,您可以选择所需的参数进行过滤,只浏览符合条件的餐厅。

WordPress自带了过滤功能,但已经有些落后了,这使得大量过滤插件的涌现,本文选择了三个与Elementor编辑器配合良好的过滤器进行讲解。

什么是过滤器插件

过滤器插件允许用户过滤网页中的文章和产品。它们通常带有各种过滤选项和不同的设计样式配置。这些插件通常是可以自定义配置的,以便使您的网站用户拥有便捷舒适的体验。

其中有一些插件可以很好地与Elementor编辑器配合使用,并且交互方式也很容易。此外,您可能会发现有两种类型的过滤系统:“filter”和“facet”,通常他们可以互换使用,但实际上它们是不同的。

Filters:它们在类别配置中更加通用和广泛,并且在选择时,它们会排除网站上的其他结果。在切换搜索内容时,他们会保持不变。亚马逊的平均分过滤就是一个很好的例子。假设你正在找书,一旦你选择了平均分过滤,譬如选择客户评论过滤器(让我们选4星+),那每个后续搜索将是4星或更多,如果你改变了书的题材或语言或其他任何东西,4星+的评论将是不变的。

Facets:它们更具体、更具交互性,并与搜索关键词直接相关。假设你在亚马逊上找书,你来到图书部分,选择了历史题材,一旦你点击它,你就会得到进一步的建议和选择(比如地区)。现在,根据您的搜索关键词(如:历史),您将获得更多的方面过滤选项(区域、历史类型等),并且随着选择的增多,您将获得更多的进一步选项。这让用户可以通过应用多个过滤器来缩小搜索结果的范围。当您的网站有数百个帖子或产品时,Facet过滤器可以显著改善客户和访问者的浏览体验。

为什么需要过滤器插件

好了,现在你知道什么是过滤器插件了,接下来我们讨论一下为什么需要他们。

WordPress 的默认过滤功能

WordPress提供了一些自带的过滤功能,您可以按类别、标签、日期和作者进行过滤。如果需要额外的过滤器,你需要写代码。

在编码中,过滤器是两种类型的钩子之一,另一种是动作,它们为函数提供了一种修改其他函数的数据的方法。钩子是一段代码与另一段代码进行交互或修改的一种方式。然而,与动作不同的是,过滤器意味着以隔离的方式工作。

要添加过滤器,您必须执行两个步骤:

  1. 创建一个回调(自定义)函数,运行过滤器时将调用该函数。
  2. 将回调函数添加到将执行函数调用的钩子中。

这对开发人员来说可能是有意义的,但对我们编码小白来说,实现起来是天方夜谭。

更多过滤器选项

过滤器插件让您可以自由地以您希望的方式呈现信息,并且在网站体验方面,为您的用户提供尽可能多的自由。正如上文所说,WordPress有一些默认的过滤选项,如类别和标签,这为您提供了一种对内容进行排序的方法。但是,您一次只能查看一个类别或标签,不能执行其他操作。另一方面,过滤器插件可以帮助您添加更多的过滤选项,使您的用户体验更加流畅和丰富。

设计

过滤器插件有很多设计选项,从颜色到形状,你可以改变它们的外观。此外,您可以选择不同类型的过滤器,如幻灯片过滤器、复选框筛选器、下拉筛选器等。您拥有的设计选项越多,您创建的网站就更加灵活可用。

规划

在我们继续讨论插件之前,我想说,组织和确定您的产品应该如何分类是非常重要的。您需要先理解这些术语:类别、标签等等,甚至,你需要制定一个计划并把它画出来(原型图)。

想象一下,你要创建一个外贸商店,卖衬衫。你打算按尺码卖吗?还是按颜色、领型?又或是按品牌?您必须在每件衬衫上添加以下属性值:颜色、尺码、领型、品牌等等,当你的用户用过滤器筛选以下内容时:黑色、V领、M码、品牌X,他们能够得到他们想要的结果。

如果你已经有了一个网站,含文章或产品,那么你需要花些时间去研究过滤选项的规则了,你要考虑客户需要什么、内容能为他们带来什么价值、你设置的搜索是否满足他们的意图,有时,一个产品或帖子会有多个属性,你必须了解你想要的最终过滤结果是什么,并分别添加属性值。

插件

接下来我们来说说这三款过滤器插件,并讲解他们的优缺点以及如何使用。

FacetWP

FACETWP是一个用于WordPress的高级过滤插件,它允许您使用站点现有的帖子类型、字段和分类法,通过仅显示相关的过滤选项来为您的用户提供他们正在寻找的内容。

它基于Facet系统,增强了WordPress的默认搜索功能。FacetWP包括12个筛选类型,如复选框、下拉菜单、日期范围和滑块。它允许您添加筛选功能到WooCommerce网站中。由于它是基于Ajax的,因此不需要刷新页面来过滤它,这使得它的速度非常快。FACETWP与Elementor配合得很好,同时提供了大量的UI设计选项。

Filters 1 FacetWP

第一步是安装插件,请从官方网站购买并下载,购买前您可以在线体验一下。如果要将其与Elementor集成,您还需要安装 FacetWP Elementor plugin。一旦你安装并激活它,你就可以开始使用它。

设置它并不是十分困难(有点小难)。您先得创建一个新的facet或标签,定义类型和数据源,保存更改,并重新索引页面。完成后,只需在Elementor的Posts元素块中启用FacetWP,你也可以复制它的简码(shortcode)并将其粘贴到Elementor附带的ShortCode元素块中。

现在,您可以在ShortCode元素块中对其进行编辑、设计。进入元素块的“高级选项”,根据您的喜好调整边框、背景等。并不是所有的配置都能完美地运行,你必须稍微调整一下选项,了解你能做什么和不能做什么,但最终,它确实能给你很多可能的设计选项。

优点

  • 它使用facets,这为您提供了更多的过滤选项。
  • 它有12种不同的筛选类型可供选择,可以让您选择最适合您的过滤器类型。
  • 它直观地集成了WooCommerce和Elementor,这对于任何拥有电子商务网站或博客网站的人来说都很重要。
  • 总的来说,FACETWP非常适合中小型企业。

缺点

  • 它并不适用于所有的WordPress主题。
  • 如果您没有编码经验,那么设置它可能会有点困难,而且总体而言,它对个人使用不太友好。
  • 相比其他只关注过滤的插件,价格似乎有点高

价格:3个网站99美元/年,20个网站249美元/年。

JetSmartFilters

CrocoBlock的JetSmartFilters是另一个基于Ajax的过滤器系统,它有七种智能过滤器变体,包括单选过滤器、数据范围过滤器、搜索过滤器、活动过滤器、范围过滤器、复选框过滤器和检查范围过滤器。

虽然JetSmartFilters的过滤器变化比FACETWP少,但它与其他Jet插件(如JetWooBuilder)配合得很好,JetWooBuilder基本上是WooCommerce所需要的一切。从产品页面模板到特殊的小工具,同时,JetEngine—它使您能够使用Elementor添加和编辑动态内容。

您可以一次使用多个过滤器,这允许您自定义页面,以使其看起来更好或满足客户的需求。虽然没有说明JetSmartFilters使用了facet系统,您可以像使用FACETWP一样,选择多个“类别”来过滤信息。

Filters 2 JetSmartFilters 2

你可以点击这里购买并下载插件。虽然它没有试用版,但它很便宜,每年只需15美元。

安装完并激活后,您必须创建一个新的筛选器,配置类型和数据源,并发布它。

发布后,在Elementor中选择已配置的过滤器,并将其放置在所需的页面上。

您必须复制Jet-Smart-Filters名称,并将其设置到posts元素块的Query部分。

注意:如果你想要过滤器的样式不同,那必须再创建一个新过滤器来实现了。

优点

  • 有七种智能过滤器可供选择。
  • 价格为每年15美元,这是一个非常低的价格。
  • 它与Elementor的集成特别好,因为它向编辑器窗口添加了新的元素块。
  • 在初始设置之后,它变得超快速且易于使用。
  • 它与WooCommerce和其他Jet插件配合得很好。

缺点

  • 没有FACETWP那么多过滤器。
  • 缺少试用版会让人犹豫要不要买。

价格:一个网站15美元/年,无限网站29美元/年。

Search & Filter

Search&Filter是您可以使用的另一种过滤器。该过滤器拥有30000多个活跃安装,并在WordPress上获得了很不错的近5星评价。它是基于Ajax的,并且像FacetWP和JetSmartFilters一样,允许多个选项筛选,类似于facets搜索。我的网站中用的就是它。

它有一个简单的拖放编辑器,允许您按类别、标签、自定义分类法、文章类型、文章日期或这些的任意组合进行搜索。过滤器有多种样式,如下拉菜单、复选框、单选按钮或多项选择。你可以使用简码和小工具把它放在你的主题和文章的任何地方。它与WooCommerce、WP eCommerce和Easy Digital Downloads兼容。

Filters 3 Search and Filter 2

你可以在这里下载免费版本的插件。一旦你安装了插件,进入它的页面,复制简码并将其插入到简码元素中即可。

优点

  • 免费版本提供了一个简单、快速的过滤解决方案。如果你是建站新手,又希望添加一个简单的过滤器的话,它适合你。

缺点

  • 它需要你知道一定程度的编码知识,除非你有高级的编码知识,否则你将无法定制的外观。
  • 付费版(下图)提供Ajax、多个表单、拖放选项等高级功能,而免费版您只能一次按一个类别进行搜索,并且需要按“选择”按钮才能执行搜索。

image

价格:单个站点20美元/年,无限站点75美元/年。

运用代码段(Code Snippets)插件管理代码,可以不用额外安装更多插件,来解决WordPress建站过程中的一些常见功能需求,譬如安装Google analytics跟踪代码。下文中记录了我在外贸建站和个人博客中常用到的代码段。

如何在WordPress文章/页面上禁止加载WooCommerce .js(javascript)和.css文件?

woocommerce会在每个页面都默认加载几个css和js,这对网站速度是有影响的,将下面这段代码,在code snippets插件中添加一个新snippet,能够实现在除了购物车、结算、账户、产品以外的页面中,移除woocommerce的css和js。

/** Disable All WooCommerce  Styles and Scripts Except Shop Pages*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' ); 
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}

20201202更新:有读者反馈提交时报错:

The snippet has been deactivated due to an error on line 4:
Cannot redeclare function dequeue_woocommerce_styles_scripts.

如果报错,可以把代码中的dequeue_woocommerce_styles_scripts改为dequeue_woocommerce_styles_script。如果不报错就不改。

如何禁用WordPress的XML-RPC

WordPress站点很少需要启用XML-RPC,但是启用它可能会导致大量的安全问题。如果你使用WordPress应用程序,你才需要启用它。此代码片段将禁用XML-RPC以提高站点安全性。

add_filter('xmlrpc_enabled', '__return_false');

如何用代码段安装Google analytics跟踪代码

请将从Google analytics中获取的跟踪代码放入到如下代码段中

add_action( 'wp_head', function () { ?>
	
这里粘贴Google Analytics的跟踪代码
<?php });

相关教程:如何给WordPress网站安装Google Analytics跟踪代码

如何移除/隐藏WordPress评论中的url字段

下面这段代码可以移除/隐藏部分WordPress主题中评论URL字段,如果你使用后发现不能移除,那说明主题不兼容,你可以在谷歌搜索:Remove Website field from the Comment Form in XXX theme,将XXX改为你的主题名称。

function remove_comment_fields($fields) {
unset($fields['url']);
return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

譬如,在astra主题免费版中,隐藏评论的url字段使用下面的代码

function wpd_remove_comment_website_field( $fields ) {
    unset( $fields['url'] );
    
    return $fields;
}
add_filter( 'comment_form_default_fields', 'wpd_remove_comment_website_field', 99 );

在astra 主题付费版中,移除评论的url字段使用下面的代码

function wpd_remove_comment_website_field( $fields ) {
    unset( $fields['url'] );
    
    return $fields;
}
add_filter( 'astra_comment_form_default_fields_markup', 'wpd_remove_comment_website_field', 99 );

如何用代码段实现复制文章功能

下面这段代码可以给WordPress文章/自定义文章添加复制功能,在文章列表中会出现duplicate按钮,但不会给页面添加复制功能。使用它你可以省了一个复制文章功能插件

/*
 * Function for post duplication. Dups appear as drafts. User is redirected to the edit screen
 */
function rd_duplicate_post_as_draft(){
  global $wpdb;
  if (! ( isset( $_GET['post']) || isset( $_POST['post'])  || ( isset($_REQUEST['action']) && 'rd_duplicate_post_as_draft' == $_REQUEST['action'] ) ) ) {
    wp_die('No post to duplicate has been supplied!');
  }
 
  /*
   * Nonce verification
   */
  if ( !isset( $_GET['duplicate_nonce'] ) || !wp_verify_nonce( $_GET['duplicate_nonce'], basename( __FILE__ ) ) )
    return;
 
  /*
   * get the original post id
   */
  $post_id = (isset($_GET['post']) ? absint( $_GET['post'] ) : absint( $_POST['post'] ) );
  /*
   * and all the original post data then
   */
  $post = get_post( $post_id );
 
  /*
   * if you don't want current user to be the new post author,
   * then change next couple of lines to this: $new_post_author = $post->post_author;
   */
  $current_user = wp_get_current_user();
  $new_post_author = $current_user->ID;
 
  /*
   * if post data exists, create the post duplicate
   */
  if (isset( $post ) && $post != null) {
 
    /*
     * new post data array
     */
    $args = array(
      'comment_status' => $post->comment_status,
      'ping_status'    => $post->ping_status,
      'post_author'    => $new_post_author,
      'post_content'   => $post->post_content,
      'post_excerpt'   => $post->post_excerpt,
      'post_name'      => $post->post_name,
      'post_parent'    => $post->post_parent,
      'post_password'  => $post->post_password,
      'post_status'    => 'draft',
      'post_title'     => $post->post_title,
      'post_type'      => $post->post_type,
      'to_ping'        => $post->to_ping,
      'menu_order'     => $post->menu_order
    );
 
    /*
     * insert the post by wp_insert_post() function
     */
    $new_post_id = wp_insert_post( $args );
 
    /*
     * get all current post terms ad set them to the new post draft
     */
    $taxonomies = get_object_taxonomies($post->post_type); // returns array of taxonomy names for post type, ex array("category", "post_tag");
    foreach ($taxonomies as $taxonomy) {
      $post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
      wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
    }
 
    /*
     * duplicate all post meta just in two SQL queries
     */
    $post_meta_infos = $wpdb->get_results("SELECT meta_key, meta_value FROM $wpdb->postmeta WHERE post_id=$post_id");
    if (count($post_meta_infos)!=0) {
      $sql_query = "INSERT INTO $wpdb->postmeta (post_id, meta_key, meta_value) ";
      foreach ($post_meta_infos as $meta_info) {
        $meta_key = $meta_info->meta_key;
        if( $meta_key == '_wp_old_slug' ) continue;
        $meta_value = addslashes($meta_info->meta_value);
        $sql_query_sel[]= "SELECT $new_post_id, '$meta_key', '$meta_value'";
      }
      $sql_query.= implode(" UNION ALL ", $sql_query_sel);
      $wpdb->query($sql_query);
    }
 
 
    /*
     * finally, redirect to the edit post screen for the new draft
     */
    wp_redirect( admin_url( 'post.php?action=edit&post=' . $new_post_id ) );
    exit;
  } else {
    wp_die('Post creation failed, could not find original post: ' . $post_id);
  }
}
add_action( 'admin_action_rd_duplicate_post_as_draft', 'rd_duplicate_post_as_draft' );
 
/*
 * Add the duplicate link to action list for post_row_actions
 */
function rd_duplicate_post_link( $actions, $post ) {
  if (current_user_can('edit_posts')) {
    $actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=rd_duplicate_post_as_draft&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce' ) . '" title="Duplicate this item" rel="permalink">Duplicate</a>';
  }
  return $actions;
}
 
add_filter( 'post_row_actions', 'rd_duplicate_post_link', 10, 2 );

如何用代码段禁止WordPress自动生成图片

由于每张图片在上传到WordPress时,会被WordPress或部分插件自动生成很多不同尺寸的图片,针对用不上的图片尺寸,可以用短代码直接组织系统生成图片,不仅能节省空间,也能避免消耗压缩额度,下面介绍如何用代码段(code snippets)禁止WordPress自动生成图片。

需要知道的是,这些自动生成的图片并不能在Wordpress的媒体库看到,需要在服务器的文件夹中查看。

下图是Siteground后台查看图片文件的方法,请在进入网站的Sitetools后按下图所示顺序操作查看,我们能看到系统为同一张图生成了很多不同尺寸的图片。

wordpress%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E5%8E%BB%E9%99%A4%E6%95%99%E7%A8%8B - 工业机械 | B2B外贸模板网站安装包

在网站页面设计完、内容上传前,我们先禁止所有自动生成的图片;若马上可以上传内容了,我们可以根据设计情况,酌情放开部分图片尺寸,譬如在制作产品列表页时,我们用到了300*300px的图片,那么就在下面的代码中,将对应行的代码前加//注释掉或直接删除该行。

// disable generated image sizes
function shapeSpace_disable_image_sizes($sizes) {
	
	unset($sizes['thumbnail']);    // disable thumbnail size
	unset($sizes['medium']);       // disable medium size
	unset($sizes['large']);        // disable large size
	unset($sizes['medium_large']); // disable medium-large size
	unset($sizes['1536x1536']);    // disable 2x medium-large size
	unset($sizes['2048x2048']);    // disable 2x large size
   unset($sizes['shop_catalog']);
   unset($sizes['shop_single']);
   unset($sizes['shop_thumbnail']);
   unset($sizes['woocommerce_thumbnail']);
   unset($sizes['woocommerce_single']);
   unset($sizes['woocommerce_gallery_thumbnail']);
	
	return $sizes;
	
}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes');

// disable scaled image size
add_filter('big_image_size_threshold', '__return_false');

// disable other image sizes
function shapeSpace_disable_other_image_sizes() {
	
	remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() 
	remove_image_size('another-size');   // disable any other added image sizes
	
}
add_action('init', 'shapeSpace_disable_other_image_sizes');

如何用代码段去掉woocommerce产品首页、列表页的面包屑

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

WooCommerce如何在付款后自动完成虚拟订单

add_filter( 'woocommerce_payment_complete_order_status', 'wmg_auto_complete_virtual_orders', 10, 3 );

/**
 * Automatically complete orders with only virtual products
 *
 * @param  string   $payment_complete_status Order status used after an order payment is received
 * @param  int      $order_id                ID of the order being processed
 * @param  WC_Order $order                   Order object being processed
 * @return string   $payment_complete_status Updated order status
 */
function wmg_auto_complete_virtual_orders( $payment_complete_status, $order_id, $order ) {
  $current_status = $order->get_status();
  // We only want to update the status to 'completed' if it's coming from one of the following statuses: 
  $allowed_current_statuses = array( 'on-hold', 'pending', 'failed' );

  if ( 'processing' === $payment_complete_status && in_array( $current_status, $allowed_current_statuses ) ) {

    $order_items = $order->get_items();

    // Create an array of products in the order
    $order_products = array_filter( array_map( function( $item ) {
      // Get associated product for each line item
      return $item->get_product();
    }, $order_items ), function( $product ) {
      // Remove non-products
      return !! $product;
    } );

    if ( count( $order_products > 0 ) ) {
      // Check if each product is 'virtual'
      $is_virtual_order = array_reduce( $order_products, function( $virtual_order_so_far, $product ) {
        return $virtual_order_so_far && $product->is_virtual();
      }, true );

      if ( $is_virtual_order ) {
        $payment_complete_status = 'completed';
      }
    }

  }

  return $payment_complete_status;
}

如何将woocomerce产品列表页的“add to cart”按钮替换为查看产品详情按钮

image 11 - 工业机械 | B2B外贸模板网站安装包

add_filter( 'woocommerce_loop_add_to_cart_link', 'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product  ) {
    $button_text = __("View product", "woocommerce");
    $button = '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';

    return $button;
}

如果你想修改按钮上的文案,将上述代码中的view product对应改掉即可。

按月购买
$14.95/月

  • 前往购买
购买12个月
$7.95/月

  • 前往购买
购买24个月
$6.95/月

  • 前往购买
购买36个月
$5.95/月

  • 前往购买
购买48个月

  • 前往购买
续费
14.95美元/月

  • 前往购买
退款时间
30天
付费方式
paypal / 信用卡
网站数量
不限个
服务器位置
美国, 加拿大, 荷兰
存储空间
不限G
备份
每日自动备份
备份保留1天
支持按需备份与一键还原
带宽上限
不限
主机配套
免费CDN服务端缓存免费邮箱免费SSL免费新域名1年免费转入域名1年免费网站迁移服务1次
月访问次数
不限
客户服务
售前及时聊天客服工单7×24


按月购买
$3/月

  • 前往购买
购买12个月
$4/月

  • 前往购买
购买24个月
$5/月

  • 前往购买
购买36个月
$6/月

  • 前往购买
购买48个月

  • 前往购买
续费
10美元/月

  • 前往购买
退款时间
30天
付费方式
paypal / 信用卡
网站数量
1个
服务器位置
美国, 日本, 英国
存储空间
10G
备份
每日自动备份
备份保留30天
支持按需备份与一键还原
带宽上限

主机配套
免费CDN免费邮箱免费SSL
月访问次数
10000
客户服务
售前及时聊天客服售后及时聊天客服工单7×24



在使用WordPress建站时,如果你销售实物的同时还提供电子文件,譬如卖实体书的同时还提供电子书,又或是像我一样销售主题、插件、模板,那就能用上WooCommerce的可下载产品功能了。本篇是WooCommerce教程系列之一,将详细介绍WooCommerce如何设置与添加可下载产品。

可下载产品的功能设置

digital downloads 1 1 - 工业机械 | B2B外贸模板网站安装包

  1. 进入: WooCommerce > Settings > Products > Downloadable Products.
  2. 从下拉列表中选择文件下载方法。
    • Force Downloads/强制下载:使用PHP强制下载文件。要确保文件不被直接链接,可以使用强制下载。文件由PHP提供。但是,如果您的文件很大,或者服务器的处理能力不足,您可能会在下载过程中遇到超时下载失败问题。在这种情况下,您需要查看您的服务器或使用重定向方法。
    • X-Accel-Redirect/X-SendFile:文件下载由服务器(nginx/Apache)处理。此方法要求在服务器上安装并启用X-Accel-Redirect/X-SendFile模块。在使用此方法之前,请确认主机已安装了这两个模块的任一。这是最可靠的方法,因为文件是直接提供给客户的,并为您提供最佳性能。文件也受到.htaccess文件的保护,使其更安全。
    • Redirect only/仅重定向(不安全):当用户下载文件时,他们点击的链接将重定向到该文件。使用此方法意味着您的文件将不受保护,任何拥有文件链接的人都可以访问该文件,即使他们没有登录。
  3. 选择访问限制级别(Access Restriction)。
    • 如果希望用户登录后才能下载文件,请勾选“Downloads Require Login/需要登录才能下载”复选框,那此时你需要禁用游客结帐功能。
    • 如果您希望在处理订单而不是完成订单时授予对文件的访问权限,请勾选“Grant access to downloadable products after payment/付款后授予对可下载产品的访问权限”复选框。
  4. 如果要确保增强文件的安全性,请选择“Append a unique string to filename for security/将唯一字符串附加到文件名以确保安全性”。建议将其勾选,并且默认就是勾选的。但如果某人已正确配置其上传目录,则不需要此操作。当您启用它时,不会影响任何文件名或链接,只有在选中此设置时上传的文件才会添加唯一的字符串。此设置完全向后兼容,可以随意关闭或打开,而不会影响任何已生成的文件链接。
  5. 保存配置

保护您的文件上传目录

默认情况下,WooCommerce引入了一个.htaccess文件来保护您的wp-content/uploads/wooCommerce_uploads目录,但是,这并不能保证保护该目录,因为一切都取决于服务器的配置。

使用Nginx服务器?

如果您的站点使用nginx服务器以及x-accel-redirect/x-sendfile或force downloads下载方法,则有必要添加此配置以获得更好的安全性:

# Protect WooCommerce upload folder from being accessed directly.
# You may want to change this config if you are using "Redirect Only" method for downloadable products.
# Place this config towards the end of "server" block in nGinx configuration.
location ~* /wp-content/uploads/woocommerce_uploads/ {
    if ( $upstream_http_x_accel_redirect = "" ) {
        return 403;
    }
    internal;
}

如果您使用的是仅重定向下载方法,那就使用下面的配置为:

# Protect WooCommerce upload folder from being accessed directly.
# You may want to change this config if you are using "X-Accel-Redirect/X-Sendfile" or "Force Downloads" method for downloadable products.
# Place this config towards the end of "server" block in nGinx configuration.
location ~* /wp-content/uploads/woocommerce_uploads/ {
    autoindex off;
}

如果您不知道您使用的是什么样的Web服务器,请联系您的主机商咨询。

创建可下载的产品

可下载的简单产品

simple downloadable virtual product product data general 1 - 工业机械 | B2B外贸模板网站安装包

接下来添加可下载的简单产品

  1. 进入WooCommerce>Products>Add Product(WooCommerce>产品>添加产品),按照添加和管理产品中所述添加简单产品。
  2. 然后勾选downloadable/可下载复选框:勾选此框后,将出现其他选项:Downloadable Files/可下载的文件、Download Limit/下载限制次数、Download Expiry/可下载有效期。
  3. 选择“Add file/添加文件”按钮,然后命名该文件。输入文件的URL,或者点击“choose file/选择文件”按钮以插入媒体库中的现有文件或上传新文件。上传文件并单击“插入”以设置每个可下载文件的URL。
  4. 输入“Download limit/下载限制”(可选)。一旦用户达到此限制,他们将无法再下载该文件。
  5. 输入“Download expiry/下载到期”(可选)。如果您定义了天数,则下载链接将在该天数后过期。
  6. 编辑完产品后,请按“发布”或“更新”按钮

可下载的可变产品

可变产品也可以有可下载的变体。添加变体时,勾选“可下载”复选框就能看到:Downloadable Files/可下载的文件、Download Limit/下载限制次数、Download Expiry/可下载有效期。

digital downloads 3 - 工业机械 | B2B外贸模板网站安装包

将可下载产品和虚拟产品结合

如果您勾选“可下载”复选框,则产品可以有库存并被视为实物产品。这使您可以同时销售包含可下载文件的实物产品,譬如实物书+电子书。

如果要添加/销售没有实务的可下载产品,请启用“Virtual/虚拟”选项。

可下载产品的订购流程

可下载产品的订购流程如下:

  1. 客户将可下载产品添加到购物车中。
  2. 客户结帐并付款。
  3. 付款后,根据您的设置,会有如下几种情况:
    1. 如果订单中的所有商品都是可下载的或虚拟的,则订单状态是已完成。
    2. 如果商品包含了实物和可下载的或虚拟的商品,则订单状态是正在处理中,直到您处理订单。
  4. 一旦订单是已完成状态,或者,如果你启用了“付款后授予对可下载产品的访问权限”选项,客户可以:
    1. 获得下载权限
    2. 在订单页面上看到下载链接
    3. 在客户收到的订单邮件中看到下载链接
    4. 如果客户已登录,可以在“我的帐户”-“下载”页面上查看到下载链接

然后,客户可以下载文件。

收据/订单邮件

当客户支付订单后,一经你确认已完成订单,客户将收到订单收据,其中包含下载链接。

digital download email - 工业机械 | B2B外贸模板网站安装包

如果已完成的订单邮件中不包含文件下载链接,那很可能是你的网站数据库出问题了,请查看这篇文章来修复它:https://docs.woocommerce.com/document/completed-order-email-doesnt-contain-download-links/

管理具有可下载产品的订单

  1. 进入:WooCommerce>Orders,然后点选你要查看或编辑的订单。
  2. 向下滚动页面到“Downloadable Product Permissions(可下载产品权限)”栏目,其中展示了可下载的内容以及客户访问该内容的次数。
  3. 你还可以撤销访问权限、授予对新的产品的下载权限。

download prod permission - 工业机械 | B2B外贸模板网站安装包

下载日志/报告

可下载产品的下载具有唯一的ID,这些ID将被跟踪并记录在报告中。请在WooCommerce>Reports中查看。

常见问题

如果我在客户购买后修改可下载产品的文件,会发生什么情况?

  • 修改文件(譬如更改名称、文件URL)会更新已购买客户的下载链接,但下载的到期日期不变。
  • 添加新的下载文件不会影响已有的订单,只有新买的人才能获得下载许可。

如果您的产品被授予“终身访问”或类似于一个产品有很多下载内容,那订阅或会员类产品则可能更合适。您还可以将文件合并到一个压缩包(ZIP)中。如果你想让老订单获得新下载文件的权限,可以试试这个插件:https://github.com/woocommerce/grant-download-permissions-for-past-woocommerce-orders

修改产品后,老订单是否可以下载新文件?

不能。

本文由LOYSEO基于一下资料进行翻译、润色:https://docs.woocommerce.com/document/digital-downloadable-product-handling/

在使用WordPress进行外贸网站建设时,如果你的产品较多,那使用WooCommerce来管理产品是提高效率的最佳选择,本篇是WooCommerce教程系列之一,将详细讲解如何在WooCommerce中添加和管理产品。

添加产品

在添加您的第一个产品之前,让我们先熟悉一下产品类别、标签和属性的工作方式。详细介绍请见:如何在WooCommerce中管理产品类别、标签和属性,下方为简介。

产品类别和标签

产品类别和标签的工作方式,与你在WordPress中写文章时使用的类别和标签大致相同。你可以随时创建、编辑和选择它们。

当你在添加或修改产品时,可以选择或添加产品类别或标签,也可以在类别或标签列表页面管理它们。

属性

你可以为每个产品添加特有的属性,也可以添加全局属性供所有商品使用。譬如颜色、尺码。

产品类型

当你已经设置好属性和类别,我们就可以开始添加产品了。添加产品时,首先要决定的是产品的类型。

  • Simple/简单产品:涵盖您可能销售的大部分产品。简单的产品需要配送,没有多种选项(譬如颜色、尺寸)。例如,一本书。如果你是搭建B2B外贸网站,通常选择简单产品即可,然后不要设置价格就不会出现加入购物车按钮.
  • Grouped/成组产品:可以单独购买的相关产品的集合,仅由简单产品组成。例如,一套六个酒杯。
  • Virtual/虚拟产品:不需要运输的产品,例如服务。启用此选项将禁用所有与配送相关的设置,如商品的“尺寸”。虚拟产品也不会触发购物车和结帐页面中的运费计算器。
  • Downloadable/可下载:勾选“可下载”后,会显示上传文件的相关字段。客户成功购买后,将获得你上传的文件,并在订单通知邮件中的附上下载链接。这适用于电子书、主题、插件等产品。
  • External&affiliate/外部产品或会员产品:如果你是卖别人的产品,并且也是让用户去别人的网站购买(譬如亚马逊),那么就可以用到这个。
  • Variable /可变产品:具有变体的产品,每个变体产品可以设置不同的SKU、价格、库存等等。例如:有不同颜色、尺寸的T恤衫,每种颜色和尺寸就是一个T恤的变体。
  • 其他产品类型通常需要安装扩展插件来实现。例如,WooCommerce订阅WooCommerce预订

接下来我们逐一讲解这6种类型的产品。

添加简单产品

添加一个简单产品类似于在WordPress中写一篇文章。

  1. 进入WooCommerce下方的Products>Add Product。然后你就会看到类似发布文章的界面
  2. 输入产品的标题和介绍
  3. 然后下拉页面到产品数据面板(product data),接下来我们详细介绍这部分。如果你的网站是B2B外贸网站,这个产品数据面板可以跳过不填。

WooCommerce Add Product - Familiar Interface

产品数据

产品数据面板是填写产品重要数据的地方,如下图所示。

WooCommerce Product Data metabox

在product data栏目中,我们能看左侧有一列标签,譬如general、inventory等等,我们挨个来看看。

一般配置/General

image 132 - 工业机械 | B2B外贸模板网站安装包

  • Price/价格
    • Regular Price/常规价格:表示产品的常规售价。如果你是做B2B外贸网站的,那就不要填写价格。
    • Sale Price/促销价格:产品的促销价格,可以在指定时间短促销,促销结束的时间点是结束日的晚上11点59分。
  • Tax/税费
    • Tax status/税费状态:分为:应纳税、运费应纳税、无。
    • Tax class/税费类型:包含选项:standard、reduce rate、zero rate。

这个tax税费配置栏需要你在woocommerce的setting中启用纳税才会显示(如下图所示),

image 106 - WooCommerce如何添加可变产品

备注:跨境税费的相关知识离我有点遥远和困难,无法做出详尽的解释,下文也将以“不启用纳税”为基础来讲解。如果懂行的,且愿意分享的话,可以与我联系,谢谢呀~

库存/inventory

disable stock mgmt - 工业机械 | B2B外贸模板网站安装包

库存部分允许您为产品设置库存,同时也能够设置是否允许缺货销售等。

你必须在WooCommerce的setting》products》inventory中选择“Enable stock management”(库存管理)(如下图所示);否则,上图中只会显示“Stock status/库存状态”选项。

image 129 - 工业机械 | B2B外贸模板网站安装包

下面注意讲解库存面板的内容。

disable stock mgmt - 工业机械 | B2B外贸模板网站安装包

  • SKU:产品的唯一编号。
  • Manage Stock/管理库存:勾选enable stock management at product level以启用产品级库存管理,当勾选后,还会出现如下配置子项。如果你的库存充裕,不需要管理库存数量,那么就不勾选它,你便可以直接设置下文的stock status(库存状态)为in stock(有货)。image 109 - WooCommerce如何添加可变产品
    • stock quantity/库存数量
    • allow backorders/允许缺货吗?:含选项:不允许、允许但通知客户、允许。如果允许,则允许0库存或负值库存销售
    • low stock threshold/低库存阈值:当库存触及你填写的数值时,会发邮件通知你。
  • stock status/库存状态:它提供了三种库存状态:in stock(有货)、out of stock(缺货)、on backorder(缺货但可售);如果你勾选了enable stock management at product level,这个配置就会消失。
  • sold individually/单独销售:启用此选项后,单个订单中仅允许购买一份当前商品。如果一个商品是可变产品,拥有多个变体,那每个变体只能买一份。

image 118 - WooCommerce如何添加可变产品

image 117 - WooCommerce如何添加可变产品

配送/Shipping

image 110 - WooCommerce如何添加可变产品

  • weight/重量:以千克为单位,填入数值
  • dimensions/尺寸:以厘米为单位,填入长宽高
  • shipping class/配送类型:配送类型用于标记拥有相似配送方式的产品,当你已经配置了配送类型时,这里才有选项。你可以查看这篇文章了解配送运费相关的教程: 如何配置WooCommerce运费费率表Table Rate Shipping

关联产品/Linked Products

image 131 - 工业机械 | B2B外贸模板网站安装包

  • upsell / 追加销售:这里用于选择你推荐的、可替代当前商品的更贵、更好的商品,它在产品页面展示。

image 112 - WooCommerce如何添加可变产品

  • cross-sell / 交叉销售:当用户将当前商品加入购物车时,交叉销售的商品将在用户的购物车页面推荐。

image 111 - WooCommerce如何添加可变产品

属性/Attributes

在“属性”标签页中,你可以使用全站通用的全局属性,或者给产品使用的自定义属性。

全局属性

要使用全局属性:

  1. 你需要先创建全局属性
  2. 在产品页面的product data》attributes中,点击下拉列表,选择一个属性,然后单击“添加”。

global attribute - WooCommerce如何添加可变产品

  1. 在下图中,点击“Select All”按钮,可以快速将所有属性值添加到产品中。
  2. 如果勾选“visible on the product page”,那么这个属性将在产品页面展示出来,如下图所示。如果你不勾选它们,就不会呈现在产品页面的additional information标签页中。image 116 - 工业机械 | B2B外贸模板网站安装包
  3. 如果你创建的是可变产品(variable product),那么勾选“Used for Variations”复选框,那么表示告知WooCommerce它将用于您的产品变体,就可以添加产品变体;如果不是添加变体产品,就不要勾选它。
  4. 单击“Save attributes”保存属性。

global attribute 2 - WooCommerce如何添加可变产品

自定义属性

1.要给产品添加特定的新属性,请按如下步骤操作:在product data的attributes标签页中,选择 Custom product attribute 并点击Add按钮.

custom attribute - WooCommerce如何添加可变产品

2.给属性命名,譬如size,并设定属性值,多个属性值之间用竖线|隔开,譬如:Small | Medium | Large。如果你创建的是可变产品(variable product),那么勾选“Used for Variations”复选框,表示告知WooCommerce它将用于您的产品变体,就可以添加产品变体了;如果不是添加可变产品,就不要勾选它。

custom attribute 2 - WooCommerce如何添加可变产品

高级 /Advanced

image 144 - 工业机械 | B2B外贸模板网站安装包

  • 购买说明Purchase note:你可以输入说明,以便在客户购买产品后邮件发送购买说明给他们。
  • 菜单顺序Menu order:用于定义产品的排序(这个功能用到的比较少),下文中介绍了如何拖拽产品排序。
  • 启用评论Enable Reviews:启用/禁用此产品的客户评论。

产品简介

productshortdescription - 工业机械 | B2B外贸模板网站安装包

添加产品简介,在某些主题里,它不仅可以配置展示在产品列表页中,也可以展示在产品详情页中。

image 139 - 工业机械 | B2B外贸模板网站安装包

image 150 - 工业机械 | B2B外贸模板网站安装包

添加完产品标题、描述、数据、简介后,我们查看页面右侧边的产品分类和标签栏。

产品分类和标签

在添加产品页面的右侧边面板中,提供了产品分类和产品标签栏目供你选择,你也可以在这里添加新的分类和标签,想要了解更多的话,查看产品分类与标签的详细教程

WooCommerce Product Categories and Tags

接下来添加产品图片和相册。

产品图片

图像的尺寸是以像素为单位的,例如,800×800像素(宽度*高度)。

建议你的产品图片要在电脑中有存档,以备不时之需。

图片类型

WooCommerce针对不同的位置和用途使用三种类型的产品图像:

  • 单个产品图片:是最大的图片,是展示在产品详情页面上的图片。
  • 目录图片:展示在产品列表中的中等大小的图片,例如商店页面、产品类别页面、相关产品、追加销售和交叉销售栏目中。
  • 产品缩略图:展示在购物车、小工具、媒体库的缩略图中,是最小的图片。

添加产品图片和相册

在添加或修改产品页面的右侧靠下位置,提供了产品图片和相册上传功能。

product image galleries settings e1519338144700 - 工业机械 | B2B外贸模板网站安装包

产品图片

产品图片是一个产品的主要图片,它会被自动裁剪成各种尺寸以便展示在不同地方。添加方法如下:

点选 Set Product Image.

set productimage - 工业机械 | B2B外贸模板网站安装包

然后在你的媒体库选择一张图片或上传一张图片

productimages 1 - 工业机械 | B2B外贸模板网站安装包

如果你要更换图片,就点击图片重选,如果要删除图片,就点击Remove product image

产品相册

添加图片到产品相册

产品相册的图片将以轮播的形式展示在产品图片之后。产品相册可以上传多张图片。

productimages 2 - 工业机械 | B2B外贸模板网站安装包

给产品相册的图片排序

你可以通过拖拽图片调整图片在相册中的排序。

productimages 6 - 工业机械 | B2B外贸模板网站安装包

从产品相册中删除图片

如果要删除相册内的图片,将鼠标悬停于对应图片上,然后点击它右上角出现的x即可删除。

productimages 5 - 工业机械 | B2B外贸模板网站安装包

客户视角

当你添加了产品图片和相册后,用户可以在商店中查看到它们,如下图所示。

productimages 4 - 工业机械 | B2B外贸模板网站安装包

当把鼠标悬停于图片时,还可以放大图片查看细节。

hover zoom image - 工业机械 | B2B外贸模板网站安装包

客户也可以点击图片上的放大镜按钮以查看大图。

lightbox zoom - 工业机械 | B2B外贸模板网站安装包

点击放大镜还会弹出一个Lightbox灯箱(你就当是弹出层),这样客户就可以在深色背景下看到高亮显示的图像特写,如果有产品相册的话,还能以幻灯片的形式观看产品相册。

zoom - 工业机械 | B2B外贸模板网站安装包

手机上的触摸手势也可以使用。

常见问题

理想的产品图片大小是多少?

我们建议的最小尺寸为800* 800像素,如果你销售的产品对图片细节非常看重,那更大的图片也没问题,记得要做好图片优化

建议不要使用低质量、模糊的图片,这样对你的销售不利。

如果我没有规范图片尺寸会如何?

WooCommerce会自动设置图片尺寸,并自动生成不同尺寸的图片供客户查看。

建议你统一图片尺寸,因为系统自动处理只会是两种方式:1.裁剪原图,导致图片不全;2.不剪裁原图,但图片会高矮不一。

如果你的图片不是1:1的尺寸,那也没关系,在wordpress的appearance中,你可以进入woocommerce的product images设置图片的剪裁比例,默认是1:1,你可以调整成4:3,3:4,根据你的实际情况调整。

image 151 - 工业机械 | B2B外贸模板网站安装包

我可以关掉灯箱(lightbox)吗?

可以,请用code snippet插件,并新增如下代码段。

add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );

function remove_wc_gallery_lightbox() { 
  remove_theme_support( 'wc-product-gallery-lightbox' );
}

我可以关闭图像缩放功能吗?

可以,请用code snippet插件,并新增如下代码段。

remove_theme_support( 'wc-product-gallery-zoom' );

设置目录可见性与特色产品

在编辑产品页面的右侧靠上方的发布面板中,你可以看到目录可见性设置(catalog visibility)。

image catalog visibility - 工业机械 | B2B外贸模板网站安装包

  • 商店和搜索/Shop and search:表示随处可见,如:商店页面,产品分类页面和产品搜索结果页面,默认选项就是这个。
  • 仅商店/Shop only:在商店页面和产品类别页面中可见,但在搜索结果中不可见。
  • 仅搜索/Search only:在搜索结果中可见,但在商店页面或类别页面中不可见。
  • 隐藏/Hidden:仅可见产品详情页,不在任何其他页面上可见,只能用产品网址访问它。

您可以在下图的“Featured”(特色)框中打勾,以便在页面展示时取用标记了特色的产品。

catalog featured image - 工业机械 | B2B外贸模板网站安装包

下文还会介绍到如何在产品列表中快速标记产品为特色产品。

添加成组产品

在产品类型中选择Grouped Product以创建成组产品,成组产品是多个其他产品的集合,所以不需要设置成组产品的价格信息。

WooCommerce Grouped Product - Inventory Tab

然后你要在linked products栏目中的Grouped Products选择多个已有的产品,你还可以拖拽已选的产品进行排序,最后记得点击右上角的发布按钮保存。

image 145 - 工业机械 | B2B外贸模板网站安装包

当你查看这个成组产品时,如下图所示,你选择的多个产品都将出现在这个成组产品页面中。

image 146 - 工业机械 | B2B外贸模板网站安装包

添加虚拟产品

在添加简单产品时,你可以勾选旁边的virtual(虚拟),这样当前产品就是虚拟产品了,虚拟产品不要配置运费,所以也不会展示shipping标签页了。

simple product virtual - 工业机械 | B2B外贸模板网站安装包

如果你添加的是可变产品,那virtual选项框将出现在每个变体中。

variable product virtual - 工业机械 | B2B外贸模板网站安装包

添加可下载产品

image 143 - 工业机械 | B2B外贸模板网站安装包

如果你是卖电子书、主题插件一类的,那么你可以添加简单产品,勾选downloadable,就能看到如下文件下载相关的字段了。

  • Downloadable Files/可下载的文件 – 你可以添加供客户下载的文件。
  • Download Limit /下载限制– 设置客户可以下载文件的次数。如果不限制下载次数,请不填它。
  • Download Expiry/下载到期时间 – 设置在购买后可下载的有效期,到期后就不再能下载。

为了获得最大的灵活性,可下载产品也会产生配送运费(例如,如果您同时提供实体书和可下载的电子书)。但如果可下载的产品不需要发货,您还可以选中“Virtual”选项框,表示虚拟产品。

添加外部产品或会员联盟产品

譬如你是做亚马逊联盟的,那么你可以将“产品类型”选为“外部/联盟”(External/Affiliate),然后这将删除不必要的配置功能(譬如税收、库存),并显示填写产品真实购买地址的URL字段,用户看到的不再是“添加到购物车”按钮,你可以自定义按钮文案,譬如Buy Product,用户点击按钮将跳转到产品URL。

image 142 - 工业机械 | B2B外贸模板网站安装包

image 141 - 工业机械 | B2B外贸模板网站安装包

添加可变产品

可变产品可以说是最复杂的产品类型。它们允许你定义单个产品的多种变体,其中每个变体可能具有不同的SKU、价格或库存,具体请查看添加可变产品的详细教程

复制产品

duplicate

为了省时,你可以在产品列表中,于产品的操作项中找到duplicate按钮,点击它可以复制当前产品的全部信息。

删除产品

delete-product-woocommerce

如果想要删除产品,请在产品列表中,于产品的操作项中找到trash按钮,点它即可。你也可以勾选多个产品,然后在bulk actions中点击move to trash按钮执行批量删除。

将产品标记为特色

如果要将产品标记为特色产品,请在产品列表中,在产品列中点选对应五角星,实心的五角星表示当前产品是特色产品。

你也可以将鼠标悬停于对应产品标题,在标题下方然后点击“快速编辑”/quick edit按钮,然后在面板中勾选feature选项。

Setting A Featured Product

你还可以批量将多个产品设置为特色产品。请勾选目标产品后,点击列表上方的bulk actions,在下拉操作中,点选edit,然后再点击apply按钮,再在展开的面板中,找到featured配置项,选中yes,然后点击update提交即可。

image 140 - 工业机械 | B2B外贸模板网站安装包

筛选产品或排序

产品筛选

产品列表页提供了多种筛选功能,譬如:按目录筛选、按产品类型筛选、按库存筛选。当选好筛选条件后,点击Filter按钮即可。

filter products - 工业机械 | B2B外贸模板网站安装包

产品排序

你可以通过拖拽排序调整产品的展示顺序。

sorting products - 工业机械 | B2B外贸模板网站安装包

具体操作步骤:请打开产品列表,然后如上图所示,点选sorting,然后你便可以如下图所示拖拽调整产品的排序。当你在前台查看商店的产品列表时,默认就是按照此处的排序排列的。

sort drag drop - 工业机械 | B2B外贸模板网站安装包

产品ID

当你使用WooCommerce的简码或小工具、链接时,会可能用到产品的ID。

你可以在产品列表中,将鼠标置于目标产品上,在产品标题下方将能看到ID:XX。如下图所示,这个产品的ID是99。

woo-product-id

允许缺货销售/延期交货

在inventory/库存标签页,勾选manage stock中的enable stock management at product level(启用产品级库存管理),然后你将能看到字段allow backorders,你可以选择其中的allow,but notify customer,表示允许缺货时销售商品,但会提示客户。

image 147 - 工业机械 | B2B外贸模板网站安装包

大多数支付网关都会立即收费。如果你想等到商品恢复库存后再向客户收取费用,可以使用WooCommerce Waitlist(付费插件)向用户发送电子邮件,通知他们该商品已恢复库存,并提供购买链接。

批量修改产品

在产品列表中,你可以勾选多个产品,然后点击bulk action按钮,选中edit后,点击apply,即可展开批量修改面板,譬如可以给已选的产品新增产品目录、新增标签、修改价格、库存等等。

image 148 - 工业机械 | B2B外贸模板网站安装包

这里的批量修改比较的初级,如果你想要更加灵活的修改,我使用的是付费插件Admin Columns,记得要安装它的woocommerce addon哦。

image 149 - 工业机械 | B2B外贸模板网站安装包

本文由LOYSEO基于一下资料进行翻译、润色、补充:

我们在外贸网站建设时,如果搭建的是零售商城,譬如出售鞋子、衣服,那么一定会用到可变产品色板选项功能,让你的客户可以直观的选择尺码、颜色、样式等等。本篇教程讲解如何使用插件Variation Swatches for WooCommerce实现产品色板功能。

  • image 134 - 工业机械 | B2B外贸模板网站安装包
    WooCommerce自带的产品属性选项,无色板
  • image 135 - 工业机械 | B2B外贸模板网站安装包
    Variation Swatches for WooCommerce实现的色板功能

视频教程

https://www.loyseo.cn/wp-content/uploads/2020/12/how-to-enable-swatches-for-woocommerce-variable-product-attributes-LOYSEO.mp4

安装Variation Swatches for WooCommerce插件

首先请在你的WordPress网站中安装并激活插件Variation Swatches for WooCommerce,相关教程:如何安装插件

添加全局属性

接下来,你要学会添加全局属性

请进入products> attributes页面,以便添加、修改、删除属性。

image 136 - 工业机械 | B2B外贸模板网站安装包

添加属性需要填写的内容:

  • name:名称,名称不能重复。
  • slug:非必填,是网址(url)的重要组成部分,不填将自动等于name;如果改了name,记得修改slug,如果网站已上线后修改slug,记得做好新旧url的301跳转,你可以安装rank math seo插件,按照外贸网站如何设置Rank Math SEO教程,启用auto post redirect配置。
  • Enable Archives:启用列表,如果你需要展示具有当前属性的产品到属性列表页中,那么就启用。例如,颜色属性有一个属性值黑色,你可以添加网址:https://yodomain.com/pa_color/black/到网站菜单中,它将展示所有黑色的商品,其中pa表示product attribute。
  • type:表示类型,这个字段只有激活了Variation Swatches for WooCommerce才会显示,它提供了三种类型:color(颜色)、image(图片)、button(按钮),譬如:尺码属性可以用type类型。
  • Default sort order:选择默认的排序方式,你可以在“Name”, “Name (numeric)”, “Term ID” or “Custom ordering” 种进行选择,它将影响属性值的排序,譬如,如果属性值是数字,则“Name (numeric)”是最合适的,那如果选择“name”,则按字母顺序排序,1和10反而在2的前面。如果选择“Name (numeric)”排序,则根据数值从小到大进行排序。 如果选择“Custom ordering” ,那么你可以在属性值列表中拖拽调整顺序。

attributes custom order - 如何在WooCommerce中管理产品类别、标签和属性

attributes numeric order - 如何在WooCommerce中管理产品类别、标签和属性

当你添加属性后,该属性将添加到右侧的表中,但还没有属性值。

请点击“configure term”进入添加属性值,可以按需添加多个属性值。

attributes configure terms - 如何在WooCommerce中管理产品类别、标签和属性

当你添加颜色类属性时,系统会让你选择颜色

image 137 - 工业机械 | B2B外贸模板网站安装包

当你添加图片类属性时,系统会让你上传图片。

image 138 - 工业机械 | B2B外贸模板网站安装包

当你添加完所有的属性后,接下来我们就是去添加可变产品了。

添加可变产品

详见教程: WooCommerce如何添加可变产品

相关教程推荐

在使用WordPress进行外贸建站时,如果你的产品类目和产品较多,那使用WooCommerce来管理产品是提高效率的最佳选择,本篇是WooCommerce教程系列之一,将详细讲解如何在WooCommerce中管理产品分类、标签和属性。

产品类别

产品类别是对具有相似功能的产品进行分组的主要方法。如果你需要,还可以添加子类别。

例如,如果你是销售服装的,则可能添加产品类别:“ T恤”,“帽衫”和“裤子”。

如何添加/编辑产品类别

请在“Products”>“categories”中管理产品类别,你可以在这里您可以添加,删除和编辑 产品类别。

image 92 - 工业机械 | B2B外贸模板网站安装包

如何添加产品类别呢?如上图所示:

  • 添加一个名称(name)
  • 添加一个Slug(非必填),如果不填,将默认为name;如果填写的话,请尽量语义化并契合name,不要用数字、无意义的字母等。
  • 如果你添加的是一个产品子类,请选择“parent category”/父分类
  • 输入Description/描述 (非必填):一些主题会在产品分类页展示描述,这是有利于SEO的。
  • 选择display type/展示类型,用于确定产品类别页面上显示的内容,一共有三个选项,
    • default/默认:使用您网站主题的默认设置
    • products/产品:仅显示产品。
    • subcategories/产品子类:将仅显示当前类别的子类别。
    • both/两者:将显示当前类别的子类别和产品。
  • 上传一个Thumbnail/图片(非必填);有些主题的页面上会展示产品类别,譬如下图,storefront主题默认在首页上显示产品类别。

productcategory2 - 工业机械 | B2B外贸模板网站安装包

如何给产品类别排序

你可以拖放产品类别来排序,默认情况下,客户在前端看到的产品类别排序与后台的排序一致,同时,产品类别小工具和产品页面上的产品类别/产品子类别的排序也是与此一致。

image 124 - 工业机械 | B2B外贸模板网站安装包

如何修改产品默认类别

每个产品都必须分配一个产品类别,如果未将产品分配给任何类别,系统将自动分配给默认类别。

初始默认类别是“Uncategorized”,默认类别是无法删除的,但是,你可以修改它的名称,也可以使用产品类别名称下面的“make default”来更换默认类别,然后再删除“Uncategorized”类别,因为它不再是默认类别。

设为默认类别

如何给产品添加类别

当你添加新产品时,可以从页面右侧的列表中选择产品类别,同时,你也可以在添加产品时,点击Add new product categoriy来添加新产品类别。一个产品可以有多个类别。

productcategory - 工业机械 | B2B外贸模板网站安装包

如果你的类别超过100个,那类别的筛选功能就会启用AJAX,以便你用起来体验更佳。

产品标签

什么是产品标签?

产品标签是另一种将产品彼此关联的方法,它是仅次于产品类别的。但与产品类别相反,标签中没有层次结构,所以没有“子标签”。

例如,如果你是卖服装的,并且很多衣服有猫的图案,那你可以做一个“猫”的标签。然后将该标签添加到菜单或侧边栏种,这样爱猫人士就可以轻松找到所有印有猫图案的T恤、连帽衫和裤子。一个产品可以有多个标签。

如何添加/编辑产品标签

添加标签的方式与添加产品类别类似,并且与添加文章标签的方式完全相同。

image 125 - 工业机械 | B2B外贸模板网站安装包

产品属性

产品属性是什么?

产品的第三种重要分组方法是属性,属性可以用于两处:

  1. WooCommerce小工具:“按属性过滤产品”使得客户可以根据属性筛选产品。如果将此小工具添加到侧边栏中,则客户可以根据属性在商店中过滤产品。 attributes2 - 工业机械 | B2B外贸模板网站安装包
  2. 可变产品。要创建可变产品,必须首先为产品创建属性,然后使用这些属性来区分不同的变体。

例如,如果您要出售服装,则两个常用的属性是“颜色”和“尺寸”,因此人们可以按照颜色和尺寸来筛选适合的服装。

如何添加/编辑产品属性

产品属性分为全局属性和自定义属性,全局属性能让你在添加产品时直接选用,而自定义属性是指你在添加产品时添加的新属性。

设置全局属性

请进入products> attributes页面,以便添加、修改、删除属性。

image 126 - 工业机械 | B2B外贸模板网站安装包

添加属性需要填写的内容:

  • name:名称。
  • slug:非必填,是网址(url)的重要组成部分,不填将自动等于name;如果改了name,记得修改slug,如果网站已上线后修改slug,记得做好新旧url的301跳转,你可以安装rank math seo插件,按照外贸网站如何设置Rank Math SEO教程,启用auto post redirect配置。
  • Enable Archives:启用列表,如果你需要展示具有当前属性的产品到属性列表页中,那么就启用。例如,颜色属性有一个属性值黑色,你可以添加网址:https://yodomain.com/pa_color/black/到网站菜单中,它将展示所有黑色的商品,其中pa表示product attribute。
  • Default sort order:选择默认的排序方式,你可以在“Name”, “Name (numeric)”, “Term ID” or “Custom ordering” 种进行选择,它将影响属性值的排序,譬如,如果属性值是数字,则“Name (numeric)”是最合适的,那如果选择“name”,则按字母顺序排序,1和10反而在2的前面。如果选择“Name (numeric)”排序,则根据数值从小到大进行排序。 如果选择“Custom ordering” ,那么你可以在属性值列表中拖拽调整顺序。

attributes custom order - 工业机械 | B2B外贸模板网站安装包

attributes numeric order - 工业机械 | B2B外贸模板网站安装包

当你添加属性后,该属性将添加到右侧的表中,但还没有属性值。

请点击“configure term”进入添加属性值,可以按需添加多个属性值。

attributes configure terms - 工业机械 | B2B外贸模板网站安装包

将全局属性添加到产品

接下来将全局属性添加到产品。

  1. 请进入:Products>add product 页面(或编辑现有产品)。
  2. 进入product data中的attribute选项卡。
  3. 在下拉菜单中选择属性
  4. 然后点击add

image 127 - 工业机械 | B2B外贸模板网站安装包

如果选择了全局属性,接下来你还可以选择属性值。

attributes6 - 工业机械 | B2B外贸模板网站安装包

添加自定义属性

如果你只想为产品添加独有的属性,可以使用这个功能。

  1. 请进入:Products>add product 页面(或编辑现有产品)。
  2. 进入product data中的attribute选项卡。
  3. 在下拉列表中选择Custom product attribute,然后按照上一章节的步骤操作。

image 128 - 工业机械 | B2B外贸模板网站安装包

本篇文章由LOYSEO.COM基于https://docs.woocommerce.com/document/managing-product-taxonomies/翻译和加工。

如果你的外贸网站建设的是零售商城,你很大可能会用到WooCommerce的可变产品,它是WooCommerce中的一种产品类型,允许你提供产品的一组变体,并控制每个变体的价格、库存、图像等。它们可以用于像衬衫、鞋子、口红这样的产品,你可以提供大号、中号和小号以及不同的颜色,下图是一个鞋子商品的展示示例,本篇是WooCommerce教程系列之一,将详细讲解如何在WooCommerce中添加可变产品。

image 114 - 工业机械 | B2B外贸模板网站安装包

备注:本教程所用的鞋店示例是基于主题Astra的付费模板Shoe store

添加可变产品

步骤1、设置产品类型

要添加可变产品,请创建新产品或编辑现有产品。

  1. 请访问后台的Products
  2. 选择“Add Product”按钮或编辑现有产品,你将能看到product data栏目。
  3. 从“product data”下拉列表中选择“variable product”。

variable product type 1 - 工业机械 | B2B外贸模板网站安装包

步骤2.添加变量使用的属性

在“属性”部分中,在创建变体之前你需要添加属性,你可以使用全站通用的全局属性,或者给产品使用的自定义属性。

局属性

要使用全局属性:

  1. 你需要先创建全局属性
  2. 在产品页面的product data》attributes中,点击下拉列表,选择一个属性,然后单击“添加”。

global attribute - 工业机械 | B2B外贸模板网站安装包

  1. 在下图中,点击“Select All”按钮,可以快速将所有属性值添加到产品中。
  2. 勾选“Used for Variations”复选框以告知WooCommerce它将用于您的产品变体,如果不选的话,就无法添加产品变体。
  3. 单击“Save attributes”保存属性。

global attribute 2 - 工业机械 | B2B外贸模板网站安装包

其中visible on the product page表示这个属性将在产品页面展示出来,如下图所示。如果你不勾选它们,就不会呈现在产品页面的additional information标签页中。

image 116 - 工业机械 | B2B外贸模板网站安装包

自定义属性

1.要给产品添加特定的新属性,请按如下步骤操作:在product data的attributes标签页中,选择 Custom product attribute 并点击Add按钮.

custom attribute - 工业机械 | B2B外贸模板网站安装包

2.给属性命名,譬如size,并设定属性值,多个属性值之间用竖线|隔开,譬如:Small | Medium | Large,勾选“Used for Variations”复选框以告知WooCommerce它将用于您的产品变体,如果不选的话,就无法添加产品变体,最后单击“Save attributes”保存属性。

custom attribute 2 - 工业机械 | B2B外贸模板网站安装包

步骤3、添加变体

要添加变体,请前往“产品数据”(Product Data)栏目中的“变体”(Variations)标签页。

手动添加变体

  1. 从下拉菜单中选择“Add Variation”,然后选择“Go”。

image 102 - 工业机械 | B2B外贸模板网站安装包

  1. 选择变体的属性,要更改其他数据的话,请单击三角形图标以展开变体。
  2. 编辑变体的内容,其中唯一的必填字段是“常规价格”(Regular Price)。
  3. 单击“保存更改”(Save changes.)。

image 103 - 工业机械 | B2B外贸模板网站安装包

这种方法需要你逐个添加变体,而下面的方法属于批量添加变体。

添加所有可能的变量产品

选择“从所有属性创建变体”(Create Variations from All Attributes),让WooCommerce创建各种可能的变体组合,然后单击“执行”(Go):

create all variations 1 - 工业机械 | B2B外贸模板网站安装包

它将为每个可能的属性组合创建一个新的变体(每次运行最多创建50个变体)。如果你有更多可能的组合,你可以再运行一次。

譬如,我们有两个属性:颜色(属性值为蓝色和绿色)和大小(属性值为大号和小号),则会产生以下变体:

  • 大号蓝色
  • 大号绿色
  • 小号蓝色
  • 小号绿色

如果以后添加其他属性,你可能需要重新生成变体,以使属性组合能正确发挥作用。

如果您有15个以上的产品变体,请使用下图所示的导航按钮翻页查看产品,每次翻页到一组新的变体时,都会保存上一组变体,你不用担心翻页时产品数据丢失了。

variations 15 - 工业机械 | B2B外贸模板网站安装包

设置默认变体

在变体标签页中,你可以设置当客户进入这个产品时看到的默认变体。在下图的示例中,我们没有设置默认值,因此客户需要自行从产品页面中选择颜色和大小。

如需设置默认值,您需要至少创建了一个变体。

default variations - 工业机械 | B2B外贸模板网站安装包

如果你希望当用户访问产品页面时,默认已经选择了某个变体,请将这个变体设为默认值。这还可以使“添加到购物车”按钮自动出现在变体产品页面上。

image 104 - 工业机械 | B2B外贸模板网站安装包

image 105 - 工业机械 | B2B外贸模板网站安装包

批量编辑变体

在设置默认变体下方,你可以看到下图所示的操作项,其中大多是批量编辑选项,你可以对所有变体的状态、价格、库存、物流等进行批量修改。

image 123 - 工业机械 | B2B外贸模板网站安装包

示例:如果想要修改所有变体的价格,那么你就选择set regular prices。

bulkedit 2 - 工业机械 | B2B外贸模板网站安装包

接着我们来整体讲解一下变体产品的数据设置(product data)

产品数据/Product data

在product data栏目中,我们能看左侧有一列标签,譬如general、inventory等等,我们挨个来看看。

一般配置/General

image 107 - 工业机械 | B2B外贸模板网站安装包

你需要在woocommerce的setting中启用纳税(如下图所示),这个配置栏才会出现。

image 106 - 工业机械 | B2B外贸模板网站安装包

包含了两个配置项:

  • Tax status/纳税状态:包含选项:应纳税,仅物流(需要纳税),无(无税费)。
  • Tax class/纳税类别:包含选项:standard、reduce rate、zero rate。

备注:跨境税费的相关知识离我有点遥远和困难,无法做出详尽的解释,下文也将以“不启用纳税”为基础来讲解。如果懂行的,且愿意分享的话,可以与我联系,谢谢呀~

库存/inventory

可变产品的库存可以在产品和变体级别进行管理,我们进入库存/inventory标签页

image 108 - 工业机械 | B2B外贸模板网站安装包

  • SKU:产品的唯一编号。
  • Manage Stock/管理库存:勾选enable stock management at product level以启用产品级库存管理,这表示所有变体产品累计的库存只有这里的设置的那么多。当勾选后,还会出现如下配置子项。image 109 - 工业机械 | B2B外贸模板网站安装包
    • stock quantity/库存数量
    • allow backorders/允许缺货吗?:含选项:不允许、允许但通知客户、允许。如果允许,则允许0库存或负值库存销售
    • low stock threshold/低库存阈值:当库存触及你填写的数值时,会发邮件通知你。
  • sold individually/单独销售:启用此选项后,单个订单中仅允许购买一份当前商品。如果一个商品有多个变体,那每个变体只能买一份。

image 118 - 工业机械 | B2B外贸模板网站安装包

image 117 - 工业机械 | B2B外贸模板网站安装包

配送/Shipping

image 110 - 工业机械 | B2B外贸模板网站安装包

  • weight/重量:以千克为单位,填入数值
  • dimensions/尺寸:以厘米为单位,填入长宽高
  • shipping class/配送类型:配送类型用于标记拥有相似配送方式的产品,当你已经配置了配送类型时,这里才有选项。你可以查看这篇文章了解配送运费相关的教程: 如何配置WooCommerce运费费率表Table Rate Shipping

关联产品/Linked Products

image 131 - 工业机械 | B2B外贸模板网站安装包

  • upsell / 追加销售:这里用于选择你推荐的、可替代当前商品的更贵、更好的商品,它在产品页面展示。

image 112 - 工业机械 | B2B外贸模板网站安装包

  • cross-sell / 交叉销售:当用户将当前商品加入购物车时,交叉销售的商品也将在用户的购物车页面推荐。

image 111 - 工业机械 | B2B外贸模板网站安装包

属性Attributes标签页变体variations标签页在本文开篇已经介绍过一些,接下来详细介绍一下单个变体的配置。

变体/variations

点击变体右边的Expand按钮展开变体信息,我们将能看到下图所示的内容,譬如:图片、SKU、价格等等。

variation - 工业机械 | B2B外贸模板网站安装包

  • 图片:点击下图中的图片标记,选择一张变体图片上传,保存即可。

variation image - 工业机械 | B2B外贸模板网站安装包

然后你打开这个产品,选择对应变体后,产品上展示的图片会对应变为你上传的变体图片。

image 113 - 工业机械 | B2B外贸模板网站安装包

  • SKU:该变体的唯一编号,如果留空,则使用产品的SKU。
  • Enabled/启用:启用或禁用变体,禁用了用户就看不到了呗。
  • Downloadable/ 可下载的:如果这是一个可下载的产品,请勾选它,勾选后将出现如下配置。image 119 - 工业机械 | B2B外贸模板网站安装包
    • Downloadable Files/可下载的文件 – 你可以添加供客户下载的文件。
    • Download Limit /下载限制– 设置客户可以下载文件的次数。如果不限制下载次数,请不填它。
    • Download Expiry/下载到期时间 – 设置在购买后可下载的有效期,到期后就不再能下载。
  • Virtual/虚拟商品 – 如果这个商品不是实体的,或者不需要运输,就选中它,选中后,配送设置将被移除。
  • Manage Stock/管理库存:如果不勾选,那就表示共用产品级别的库存;如果勾选,则表示给变体自定义库存,并且有如下两个配置子项。image 120 - 工业机械 | B2B外贸模板网站安装包
    • Stock quantity/库存数量
    • Allow backorders/允许缺货销售吗?:含选项:不允许、允许但通知客户、允许。如果允许,则允许0库存或负值库存销售

  • Regular Price/常规价格 (必填的) – 设置变体的价格。
  • Sale Price/促销价格 (非必填的) – 为变体商品设置促销价格。
  • Stock status/库存状态:当你在inventory标签页没勾选启用产品级库存时,才会出现这个选项,用于让你设置变体是否有货、无货、缺货可售。image 121 - 工业机械 | B2B外贸模板网站安装包

  • Weight/重量:设置变体的重量,或留空以使用产品的重量。
  • Dimensions/尺寸:变体的高度,宽度和长度,或留空使用产品的尺寸。
  • Shipping class/配送类型:它会影响变体的配送,如果配送类型与产品不同,请在这里选择。如果你未添加过配送类型,那配送类型只能等同于产品。image 122 - 工业机械 | B2B外贸模板网站安装包
  • Description/描述:针对变体的描述,不会展示给客户,仅供自己使用。

客户看到的产品是怎样的?

在前端,当查看可变产品时,用户会看到用于选择变体的下拉框。根据用户的选择,将展示对应的库存和价格。

- 工业机械 | B2B外贸模板网站安装包

如果你安装了免费插件Variation Swatches for WooCommerce,它能让颜色和尺码直观的展示。如下图所示

image 114 - 工业机械 | B2B外贸模板网站安装包

如果用户未选择变体,就尝试点击“添加到购物车”按钮,则会看到一条提示,要求用户选择变体属性。

image 115 - 工业机械 | B2B外贸模板网站安装包

在“产品列表”(Product Archive)页面中,不会显示“添加到购物车”(Add to Cart)按钮,因为在产品页面上选择“添加到购物车”(Add to Cart)之前必须先选择变体。

archive page - 工业机械 | B2B外贸模板网站安装包

相关教程推荐

本篇文章由LOYSEO.COM基于https://docs.woocommerce.com/document/variable-product/翻译、重排、加工修改。

WooCommerce简码(shortcode)可以让我们将产品、购物车等内容加入到页面或者文章中。我们在外贸建站时,可以直接通过Elementor Pro的Product元素块来配置产品的展示,但如果元素块或是免费主题无法提供所需的产品配置呢?尤其针对免费建站,那学习WooCommerce简码能让你自定义所需的产品展示,譬如在网站首页,以tab标签的形式展示不同类目的产品

此外,如果你使用WordPress默认的古腾堡编辑器来编辑页面或者文章,如下图所示,点击左上角的加号按钮,在面板中你可以找到WooCommerce区块,单击区块即可加入到页面中。

image 104 - 工业机械 | B2B外贸模板网站安装包

它们与本文即将介绍的简码的作用是一样的,简码是一小段代码,需要你自己撰写代码规则,相比之下,这种区块更易用。

虽然我们在制作网站页面时,不大会使用古腾堡编辑器,譬如我常用Elementor编辑器进行外贸建站,即便如此,你依旧可以在给外贸网站写博客文章时,通过这种方式插入相关的产品信息。

此外,学习了WooCommerce简码,当你再使用Elementor制作页面时,能够体会到更多的便利和灵活性,下文会有一些示例。

由于本站开启了商城,导致简码被直接调用了实际产品,所以接下来会将简码两侧的[]方括号去掉,请在实际使用时加上[]

如何使用WooCommerce简码

woocommerce_cart为例,它表示购物车页面。当你向页面中添加这个短代码时,那这个页面将包含购物车内容。

image 105 - 工业机械 | B2B外贸模板网站安装包
在后台给页面添加了购物车简码

image 106 - 工业机械 | B2B外贸模板网站安装包
这是该页面的预览效果

如何修改WooCommerce我的账户、结算、购物车页面的设计样式

你也可以使用Elementor编辑这个页面,给他增加一些设计样式,下图便是我用Elementor加了样式后的效果(譬如我给内容加了边框和投影,给标题添加了背景色和底部形状分隔线)。

image 107 - 工业机械 | B2B外贸模板网站安装包

如果你在尝试用Elementor编辑这些页面时提示无法编辑,请先前往WooCommerce的设置中取消关联再编辑,编辑完成后再建立关联。

image 10 - 工业机械 | B2B外贸模板网站安装包

推荐相关教程: Elementor的Advanced高级设置教程(18个功能点)

好,接下来我们开始介绍各种WooCommerce简码及其用途、示例。

页面简码

在安装WooCommerce时,如果按照WooCommerce安装向导操作,会自动生成4个页面:我的账户、购物车、结算、商店。如果你想自行制作这些页面,只需要添加页面并加入这些简码即可。

image 108 - 工业机械 | B2B外贸模板网站安装包

其中购物车、结算、我的账户的简码如下。

  • woocommerce_cart – 购物车页面
  • woocommerce_checkout – 结算页面
  • woocommerce_my_account – 我的账户页面
  • woocommerce_order_tracking – 订单跟踪页面,这个页面未自动生成,你也可以自行添加。

当你编辑这些页面时,你将看到下图,实际上就是将简码加入了对应页面中。

image 109 - 工业机械 | B2B外贸模板网站安装包

购物车页面

简码:woocommerce_cart

image 111 - 工业机械 | B2B外贸模板网站安装包

结算页面

简码:woocommerce_checkout

image 112 - 工业机械 | B2B外贸模板网站安装包

我的账户页面

简码:woocommerce_my_account

image 113 - 工业机械 | B2B外贸模板网站安装包

订单跟踪页面

简码:woocommerce_order_tracking

image 110 - 工业机械 | B2B外贸模板网站安装包

产品简码

你可以使用产品简码在页面、文章、产品详情中插入产品。产品简码是products,你需要在简码中加入各种属性组合,以便实现你想要展示的产品信息,我们继续往下看。

我们先看一个示例,譬如:展示6个卖的最好的促销产品,每行3个产品,它的简码如下。注意:下面的图例中的展示效果与主题强相关,主题不同看到的“皮肤”不同哦。

products limit="6" columns="3" orderby="popularity"  on_sale="true" 

  • limit="6":表示展示6个
  • columns="3":表示一行展示3个
  • orderby="popularity":表示挑选卖的最好的商品
  • on_sale="true":表示挑选出来的产品是有促销价格的

image 114 - 工业机械 | B2B外贸模板网站安装包

用简码存在的一个问题是,产品展示的外观取决于你用的主题,无法在Elementor中对简码进行样式上的细致修改,但能做一些整体的设置,譬如内外间距、背景、边框等等。

image 115 - 工业机械 | B2B外贸模板网站安装包

如果你想对细节进行样式修改,那么建议你不要用简码,而是购买一个Elementor Pro,使用它的Product元素来自定义样式。

image 116 - 工业机械 | B2B外贸模板网站安装包

接下来我们介绍一下可供使用的产品属性

产品属性

以下属性可与Products简码一起使用。

展示类产品属性

  • limit – 需要展示的产品数量,譬如,limit="6",默认是limit="-1",表示显示全部产品,默认的意思是:如果你想展示全部产品,limit="-1"可省略不写,下方同理。
  • columns – 每行的列数,默认为4,表示一行展示4个产品。
  • paginate – 启用翻页功能,要与limit一起使用,默认值为false,设置为true可以启用分页功能,譬如:paginate="true"。下图的简码是:products limit="4" columns="4" paginate="true",表示每页展示4个产品,每行展示4个产品,显示产品翻页功能。

image 118 - 工业机械 | B2B外贸模板网站安装包

  • orderby – 根据你设置的内容选项来定义排序, 如果你想加入多个选项,多个选项之间以空格间隔,可用的选项包括如下:
    • date – 产品的发布日期
    • id – 产品IDimage 120 - 工业机械 | B2B外贸模板网站安装包
    • menu_order – 菜单排序,编辑产品时,在产品数据》高级中可以设置菜单排序,请填写数值,数值越大越优先展示。image 119 - 工业机械 | B2B外贸模板网站安装包
    • popularity – 产品的销量
    • rand – 在页面加载时随机呈现产品(可能不适用于使用缓存的站点,因为它可能会保存特定的顺序)。
    • rating – 产品的评分
    • title – 产品标题,这是默认的orderby模式。
  • order – 为orderby中设置的选项定义排序方式,含:升序(ASC)和降序(DESC),默认为ASC。
  • skus – 以英文逗号分隔多个产品的SKU,每个产品的sku是唯一的。编辑产品时,在产品数据》库存中可以设置产品的SKU。image 121 - 工业机械 | B2B外贸模板网站安装包
  • category – 以英文逗号分隔多个产品分类的slug。image 122 - 工业机械 | B2B外贸模板网站安装包
  • tag – 以英文逗号分隔多个产品标签,你可以在编辑产品时添加标签,也可以在产品列表中,快速修改产品并添加多个标签。image 123 - 工业机械 | B2B外贸模板网站安装包
  • class – 添加一个CSS Class,以便你可以使用自定义CSS修改产品的样式(难度颇高,无CSS知识储备的无视它)。
  • on_sale – 展示促销商品,不能与下文的best_selling或top_rated一起使用。
  • best_selling – 展示销量最好的商品,不能与on_sale或top_rated 一起使用。
  • top_rated – 展示评价最好的商品,不能与on_sale或best_selling一起使用。

内容类产品属性

  • attribute – 产品属性,由你自己定义产品属性,譬如鞋子颜色、尺码,你可以指定产品的属性slug来选取要展示的产品。image - 工业机械 | B2B外贸模板网站安装包
  • terms – 产品属性值,通过指定产品属性值来选取要展示的产品,譬如红色、黄色鞋子,多个属性值之间要用英文逗号分隔
  • terms_operator – 产品属性值之间的运算关系,包括:
    • AND – 表示“和”关系,将显示包含全部所选属性值的产品。
    • IN – 表示“包含”关系,将显示包含任一所选属性值的产品,这也是TERMS_OPERATOR的默认值。
    • NOT IN – 表示“不包含”关系,将显示不包含任一所选属性值的产品。
  • tag_operator – 产品标签之间的运算关系,包括:
    • AND – 表示“和”关系,将显示所有选定标签中的产品。
    • IN – 表示“包含”关系,将显示包含任一所选标签的产品。这是TAG_OPERATOR的默认值。
    • NOT IN – 表示“不包含”关系,将显示不包含任一所选标签的产品。

示例:

按颜色属性(attribute="color")展示不包含(terms_operator ="not in")绿色或红色(terms="green,red")的产品6个(limit="6"),每行3个产品(columns="3")。

products  limit="6" columns="3" attribute="color" terms="green,red" terms_operator ="not in"

image 1 - 工业机械 | B2B外贸模板网站安装包

  • visibility – 可见性,将根据你选定的可见性选项来展示产品,image 2 - 工业机械 | B2B外贸模板网站安装包可见性的选项如下:
    • visible – 可见的:在商店和搜索结果中可见的产品。这是默认的可见性选项。
    • catalog – 产品目录:产品仅在商店页面、产品目录页中可见,在搜索时不可见。
    • search – 搜索结果:产品仅在搜索结果中可见,但在商店、产品目录页中不可见。
    • hidden – 隐藏:产品在商店、产品目录页和搜索结果都隐藏,只能通过访问URL访问。
    • featured – 特色产品:是指标记为特色产品的产品,在产品列表中点亮小星星即为特色产品。image 3 - 工业机械 | B2B外贸模板网站安装包

  • category – 展示你选择的产品类别的产品。
  • cat_operator – 产品类别之间的运算关系,包括:
    • AND – 表示“和”关系,将显示包含全部所选类别的产品。
    • IN – 表示“包含”关系,将显示包含任一所选类别的产品,这是cat_operator的默认值
    • NOT IN – 表示“不包含”关系,将显示不包含任一所选类别的产品。
  • tag – 展示你选择的产品标签的产品。

image 5 - 工业机械 | B2B外贸模板网站安装包

示例:只展示产品标签里带有demo的产品

products tag="demo"

image 6 - 工业机械 | B2B外贸模板网站安装包

  • ids – 展示所选产品ID的产品,多个ID之间以英文逗号分隔
  • skus – 展示所选SKU的产品,多个ID之间以英文逗号分隔

image 4 - 工业机械 | B2B外贸模板网站安装包

注意:如果你所选的产品未展示,请确保它们的可见性没有被设置为“隐藏”。

进阶示例

我以前在建站时,会遇到这种需求:用标签切换的形式展示不同类目的产品(见下方视频)。但Elementor Pro里不提供这种形式的产品元素块,学习了WooCommerce简码,我们就能用tab类元素块+简码来实现。

Elementor免费版就提供了3种标签切换元素块,上图用到的是tabs。

image 8 - 工业机械 | B2B外贸模板网站安装包

你只需要将简码放到tab的内容里即可,如下图所示,如果在编辑模式下无法看到效果,请update页面后预览。

image 9 - 工业机械 | B2B外贸模板网站安装包

产品分类简码

下面这两个简码能够在任何页面上展示产品分类

  • product_category – 展示指定分类下的产品
  • product_categories – 展示所有产品分类

产品分类属性

  • ids – 指定要展示的分类id,多个id之间用英文逗号分隔,用在product_categories简码中 ,你可以通过下图所示方式获取分类的id,也可以查看编辑产品分类页面的url获取id

image 15 - 工业机械 | B2B外贸模板网站安装包

  • category – 可以是分类id、slug或名称,用在product_category
  • limit – 要展示的分类数量
  • columns – 每行展示的数量,即列数,默认值是4。
  • hide_empty – 默认值是1,表示隐藏无产品的空分类。如果设置为0,则展示空的分类。
  • parent – 可设置展示某个分类ID的所有子分类。如果设置为“0”,则仅显示一级分类。
  • orderby – 默认按“名称”排序,可设置为按“ID”、“Slug”或“menu_order”排序。如果要按你指定的ID排序,则可以使用orderby=“include”
  • order – 基于orderby中的排序依据,设置产品分类的排序是升序(ASC)还是降序(DESC),默认为升序ASC。

产品分类简码示例

展示指定的多个产品分类,并按照所选的产品分类id排序

product_categories ids="16,17,19,18"  orderby="include"

image 14 - 工业机械 | B2B外贸模板网站安装包

展示2个有产品的一级产品分类

product_categories limit="2" parent="0"

image 12 - 工业机械 | B2B外贸模板网站安装包

展示指定分类下的所有产品

product_category category="clothing"

image 13 - 工业机械 | B2B外贸模板网站安装包

这个代码我放到了不同主题里效果不同,有些主题下展示的样貌惨不忍睹つ﹏⊂,目前porto主题的预览效果不错。

产品页面简码

按ID或SKU显示一个完整的产品页面。(虽然我也想不到这个的常见使用场景,譬如在博客文章里直接插入产品?emm..也是可以的哈)

product_page id="16"

product_page sku="99"

image 16 - 工业机械 | B2B外贸模板网站安装包

相关产品简码

related_products limit=”12″

这个简码通常用于放在产品页面,主题通常都会配置展示相关产品的功能。

加入购物车简码

按产品ID显示单个产品的价格和“添加到购物车”按钮。

image 17 - 工业机械 | B2B外贸模板网站安装包

在非WooCommerce的页面上显示WooCommerce通知

shop_messages简码允许您在非WooCommerce页面上显示WooCommerce通知(如“产品已添加到购物车”)。

当您使用其他简短代码(如add_to_cart)并希望用户对其操作获得一些反馈时,这将非常有用。

image 19 - 工业机械 | B2B外贸模板网站安装包
简码

image 18 - 工业机械 | B2B外贸模板网站安装包
效果示例

常见注意事项

  • 建议在编辑器的文本模式下加入简码,而不是可视化模式

此图像的alt属性为空;文件名为image-9.png

image 20 - 工业机械 | B2B外贸模板网站安装包

  • 注意简码的双引号是英文符号"",而非中文的双引号“”

本文由LOYSEO翻译自:https://docs.woocommerce.com/document/woocommerce-shortcodes/,同时补充了我的理解与操作实例。

我们在外贸建站教程中介绍过:如何在WordPress托管主机(譬如SiteGround)中一键开通Cloudflare CDN,以便增加网站安全提升网站访问速度,但是,如果你的主机不提供一键开通Cloudflare CDN功能怎么办呢?跟着本篇教程做,一点也不难。

本篇教程适合这类网站:你的网站所在的主机不提供免费CDN功能,譬如Cloudways主机,但你又想开通Cloudflare CDN。

步骤概要:

  1. 注册一个Cloudflare账号;
  2. 添加你的网站到Cloudflare中,获取Cloudflare的域名解析服务器(NS);
  3. 前往你的域名注册网站,修改域名解析服务器(NS)为Cloudflare的,Cloudflare会自动获取已有的解析记录
  4. 按需在Cloudflare中添加网站解析记录,常用的解析记录是A记录,用于将域名指向网站的服务器IP

举几个实际案例,可能有跟你一样的情况,如果不想看就跳到下文看教程

  1. 最费力的例子:域名购于阿里云,网站服务器用的非WordPress托管主机,譬如Cloudways、阿里云轻量应用服务器、各种VPS,为了使用Cloudflare的免费CDN提升安全(譬如防御DDOS),需要将域名解析服务器在阿里云里换成了Cloudflare的,所有域名解析记录都在Cloudflare自行维护,企业邮箱(也就是域名邮箱)用的腾讯的,邮箱解析记录也同样在Cloudflare维护。——我的网站就是这么折腾的。
  2. 稍许费力的例子:域名购于阿里云,网站服务器用的是WordPress托管主机,譬如SiteGround、ChemiCloud,邮箱用的网易企业邮箱,域名解析服务器用的SiteGround,邮箱解析记录在Siteground内配置,同时,也是在Siteground中配置的邮箱解析记录。——这种情况,你需要学会:在域名购买处,修改域名解析服务器(NS),并在主机的解析记录管理中添加邮箱解析记录。
  3. 最省力的例子:域名、服务器、邮箱、CDN全都用WordPress主机商提供的(譬如SiteGround),那么你完全不需要操心解析记录,因为主机商全部自动搞定。

注册Cloudflare账号

  1. 前往注册地址:https://dash.cloudflare.com/sign-up
  2. 输入邮箱、密码,点击创建账户按钮
  3. 在邮箱中接收验证邮件并点击验证链接。

如何给网站开通Cloudflare CDN
注册Cloudflare

添加你的网站到Cloudflare中

账户创建完成后,请添加你的网站域名到cloudflare中

如何给网站开通Cloudflare CDN
添加站点

接下来我们选择免费计划并继续,免费计划就包含了DDOS共计缓解、全球内容分发网络(cdn)。

如何给网站开通Cloudflare CDN
开通免费计划

然后系统会自动扫描你的站点查找已有的DNS记录,也就是解析记录,并导入到Cloudflare中,免去你重复配置的功夫。

如何给网站开通Cloudflare CDN
扫描已有的DNS记录

当扫描完成后,进入如下界面,会呈现你已有的解析记录,但是由于我的演示网站是个全新的域名,所以下图中没有解析记录。如果你看到解析记录的代理状态是橙色云朵,表示开启了CDN;如果是灰色云朵,表示仅做解析用途,不会给予保护和CDN。我们点击继续按钮

如何给网站开通Cloudflare CDN

在接下来的弹出窗中,由于我没有添加任何记录,系统提示我以后要添加解析记录,这样才能顺利访问网站,我们点击确认继续。

如何给网站开通Cloudflare CDN

最后,Cloudflare告诉你如何修改名称服务器,也就是域名服务器(NS)。请登录到你现有的域名注册处,将已有的NS删除,新增Cloudflare提供给你的NS,通常更换NS全部生效需要24h,一旦生效,Cloudflare也会给你发送邮件通知。

如何给网站开通Cloudflare CDN

修改域名服务器(NS)

我的域名是在阿里云注册的,以阿里云为例,我们来学习如何修改域名服务器。如果你在porkbun、namesilo注册的域名,可以查看这篇教程:如何使用NS进行域名解析

首先,在域名管理页面,点击域名右侧的管理按钮

如何给网站开通Cloudflare CDN

进入域名基本信息界面,找到修改DNS,点击进入

如何给网站开通Cloudflare CDN

继续点击修改DNS服务器

如何给网站开通Cloudflare CDN

然后填入cloudflare提供给你的两条NS记录并确认保存

如何给网站开通Cloudflare CDN

保存成功后,你将看到当前DNS服务器已经成功修改了。

如何给网站开通Cloudflare CDN

如果你想查看域名解析是否生效,可以通过网站https://www.whatsmydns.net/#NS/,输入域名查看NS生效与否。

image 183 - 工业机械 | B2B外贸模板网站安装包

如果域名成功添加到cloudflare,你会收到邮件通知。

image 185 - 工业机械 | B2B外贸模板网站安装包

完成域名服务器修改后,回到cloudflare,点击下图所示的完成,检查名称服务器按钮继续。

image 184 - 工业机械 | B2B外贸模板网站安装包

接下来有个快速入门指南

Cloudflare快速入门指南

image 186 - 工业机械 | B2B外贸模板网站安装包

第1项,提高安全性

这是与HTTPS相关的,当你给网站安装SSL证书后,可以启用自动HTTPS重写,以避免网站里有http和https混合的情况,如果你的网站还安装SSL证书,那就不要开启了。

image 187 - 工业机械 | B2B外贸模板网站安装包

image 188 - 工业机械 | B2B外贸模板网站安装包

第2项,优化性能。

通常我们使用WordPress建站的话,建议安装诸如WP Rocket缓存插件,它们都提供了js、css、html文件缩小功能,所以可以不勾选。

image 189 - 工业机械 | B2B外贸模板网站安装包

image 190 - 工业机械 | B2B外贸模板网站安装包

第3项,摘要。这是对前面两项配置的总结,确认无误后,点击完成即可。

image 191 - 工业机械 | B2B外贸模板网站安装包

此时你将跳转到这几个域名的配置管理界面,请点击图中的DNS去配置解析记录。

image 192 - 工业机械 | B2B外贸模板网站安装包

给网站添加A解析记录

由于我的域名是一个崭新的、未曾做任何解析记录的域名,所以,在DNS页面,没有任何解析记录。如果你的域名在原解析处有解析记录,那么将会自动同步过来。

接下来,如果我们要将域名指向网站所在的服务器,来添加一条A记录,如下图所示,我将配置loyseo.top指向到cloudways服务器

image 193 - 工业机械 | B2B外贸模板网站安装包

  1. 点击添加记录按钮
  2. 你将看到一行表单
  3. 类型中选择A
  4. 名称中填入@,表示你将使用不带www的域名,也叫根域,譬如loyseo.com而非www.loyseo.com;如果你要使用www域名,那么此处就填入www即可
  5. IPv4地址:填入你的服务器的IP地址,通常服务器管理面板里都会提供
  6. 代理状态:默认是一朵橙色的云,表示启用了CDN;如果你点击一下它,就会变成灰色的云,表示不启用CDN。
  7. 点击保存提交即可。
  8. 这里是对当前解析记录的解释,当你修改记录表单时,此处的解释也会相应变化。

同理,如果你的邮箱是网易、腾讯或阿里企业邮箱,你也将获得邮箱解析记录,将他们添加到Cloudflare中即可。

最后,如果你的网站安装了SSL,启用了https,那么如下图所示,将SSL/TLS页面中的模式设为完全(严格)。

image 194 - 工业机械 | B2B外贸模板网站安装包

相关教程:

外贸建站中,如果你做的是B2C dropshiping外贸独立站,那这款一键导入速卖通商品到你的WooCoommerce商店的插件就非常棒了,它的名字是Aliexpress dropshipping for Woocommerce by theShark

这个插件免费版可以每月导入160个产品,每周导入50个产品,如果要导入不限量产品,就购买付费版吧。

首先,请你到网站后台安装插件界面,输入wooshark搜索,如下图所示,找到插件后点击install now进行安装,安装完后点击activate激活。

wooshark aliexpress to woocommerce 12 - 工业机械 | B2B外贸模板网站安装包

激活后,如下图所示,在左侧找到wooshark菜单进入。(此处有我在下文翻车的线索

wooshark aliexpress to woocommerce 13 - 工业机械 | B2B外贸模板网站安装包

你可以输入速卖通里商品的SKU、url导入,也可以搜索关键词后,直接在网站后台筛选并导入。

wooshark aliexpress to woocommerce 14 - 工业机械 | B2B外贸模板网站安装包

我选择了URL导入,输入url后点击导入按钮,等待右上角的加载图标结束

wooshark aliexpress to woocommerce 15 - 工业机械 | B2B外贸模板网站安装包

然后你将看到产品信息的弹出层,请逐一查看每个标签的内容,并酌情设置。

wooshark aliexpress to woocommerce 16 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 17 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 18 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 19 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 20 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 21 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 22 - 工业机械 | B2B外贸模板网站安装包

最后点击右下角import按钮导入

wooshark aliexpress to woocommerce 23 - 工业机械 | B2B外贸模板网站安装包

然后静待一会儿,当页面提示下图时,表示导入成功,我们去看看这个产品。

wooshark aliexpress to woocommerce 11 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 10 - 工业机械 | B2B外贸模板网站安装包

然后,翻车了,产品描述(description)没有导入进来呢,我设置的是发布状态,但实际是草稿了呢。(╯‵□′)╯︵┻━┻

wooshark aliexpress to woocommerce 9 - 工业机械 | B2B外贸模板网站安装包

(⓿_⓿)检查错误:我是临时装了个多站点,然后系统提示我https有异常,我去处理一下再回来继续。

  • 当我把http换成https——依旧不成功;
  • 换了个单站点(非多站点)——依旧不成功。

挠头,难道跟服务器有关吗?我在其他服务器的网站成功了呀....陷入回忆...( ⊙ o ⊙ )啊!你看下图,这是初次进入插件收到的提示,让我配置设置呢,我没做,但是,为啥不强提醒一下!还用的是√符号,坑姐呢这不是...(╯‵□′)╯︵┻━┻

wooshark aliexpress to woocommerce 8 - 工业机械 | B2B外贸模板网站安装包

好,到设置页面,按下图所示勾选后,滚动到页面最下方有个蓝色的小按钮保存。

wooshark aliexpress to woocommerce 7 - 工业机械 | B2B外贸模板网站安装包

然后再去导入产品,这下就导入成功了,见下图,description出现了。

但是,涉及到颜色变量时,譬如一款鞋子有多种颜色或款式,上图的第7个选项(Use variations displayed value)是有用的,因为此处是无法导入正确的颜色的(这会误导客户),同时,也不能导入颜色对应的产品图片(付费功能),用上图第7个选项的功能导入变量数值,反而不会因为错误颜色误导人,启用这个选项也需要付费版(我在付费版里启用成功了,但免费版怎么都不成功),付费版也不贵,25.99美金买断终身/5个站点,直接在插件界面中购买即可。

wooshark aliexpress to woocommerce 6 - 工业机械 | B2B外贸模板网站安装包

接下来,你还可以试试按关键词搜索产品并单个导入,批量导入是付费功能。

wooshark aliexpress to woocommerce 5 - 工业机械 | B2B外贸模板网站安装包

在插件界面点击GO Pro就可以前往购买付费版了(连账号都不用注册),

wooshark aliexpress to woocommerce 3 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce 2 - 工业机械 | B2B外贸模板网站安装包

wooshark aliexpress to woocommerce - 工业机械 | B2B外贸模板网站安装包

付完款之后获取激活码,在网站后台卸载免费插件,并安装付费的插件包,将激活码输入到插件的激活页面即可。接下来按照上文的方法进行操作导入便是了~

wooshark aliexpress to woocommerce 4 - 工业机械 | B2B外贸模板网站安装包

用付费版便能导入变量产品的图片了,如下视频所示,更换color时,图片也会配套出现哦~

如果你想像视频中一样,将color等属性陈列出来,而不是如图上文中的下拉菜单形式,你需要用到免费插件Variation Swatches for WooCommerce

我打算写的:

  • B2C外贸建站教程(开了个头,估计又是几万字,还没选好用哪套模板,大概率是Astra)
    • 含WooCommerce及扩展插件教程(已经写了几篇),先写完这个,再写B2C的
  • Elementor教程补充视频(一些常用操作细节)
  • 又看中了个主题(暂时不说是谁),模板很多,模块很多,部分模板支持Elementor,大部分是支持WPBackry编辑器的,打算写教程,你们有啥喜欢的主题不?
  • 一些产品展示模块的详细教程,譬如多种类型的产品橱窗
  • ....等等

你们需要啥?或者想我优先写啥,可以加我微信发给我,也可以留言~

WooCommerce小工具可以让你在WordPress外贸建站时,添加不同产品功能到页面上,譬如展示最新产品、产品分类、搜索产品、产品价格筛选等等。

如下图所示,这些小工具位于WordPress后台的外观》小工具页面中,你可以将它们添加到网站主题设定的区域中。下图中右侧的主侧边栏、页面小工具区域1等便是区域,网站主题是指你安装并启用的WordPress主题,不同主题提供的区域有所不同,并且不同主题的小工具设计样式也不同。

WooCommerce小工具

如何添加WooCommerce小工具到页面中

在WordPress后台的外观》小工具页面中,找到产品相关的小工具,如下图所示,点击小工具的右侧三角箭头,在下拉选项中找到你想要添加它们的区域名称,选中区域后,点击添加,即可将这个小工具添加到对应的区域中。一般我们用的比较多的区域是:Woocommerce侧边栏和产品侧边栏。

WooCommerce小工具

然后,通常在网站主题的设置中,如果你需要为页面添加侧边栏,以Astra主题为例,你想在产品分类和产品页面添加侧边栏,请查看教程:《 Astra主题教程:免费建外贸网站》。

如果你使用Elementor Pro制作产品列表页模板,可以使用Elementor的sidebar元素来将小工具所在区域加入到页面中。

WooCommerce小工具介绍

启用的产品过滤器

显示已启用的产品过滤器的列表,如下图所示,我在产品列表中添加了两个产品过滤器,分别是按价格筛选和按颜色筛选,当你调整筛选内容时,在启用过滤器一栏中,会展示你选择的筛选项。

WooCommerce小工具 - 启用的产品过滤器

购物车

当客户把商品加入购物车时,在这个小工具里会展示购物车内容与结账按钮。

image 83 - 工业机械 | B2B外贸模板网站安装包

按属性筛选产品

当你给产品设置了属性时,譬如颜色、尺码等等,这个小工具能让客户按照属性进行筛选,譬如筛选出蓝色的产品。

WooCommerce小工具-按属性筛选产品

下图是这个小工具的配置项,你可以设置标题,选择进行筛选的属性,属性值展示的形式(列表和下拉),还能设置查询类型,即:当客户选中多个属性值时,属性值之间是和的关系,还是或的关系,譬如:红和黑,还是红或黑。如果选择“和”,表示既要是红的,也要是黑的;如果选择“或”,表示红的、或黑的、或者红黑的都可以。

image 98 - 工业机械 | B2B外贸模板网站安装包

按价格筛选产品

WooCommerce小工具

按评分筛选产品

根据商品的客户评分来筛选,当商品没有评分时,就不会展示。

WooCommerce小工具

产品类别

不同主题的产品类别样式会有所区别,譬如下图是Astra主题的产品类别样式,父子分类是展开的,但有些主题是伸缩式的。

WooCommerce小工具

如下图所示,你也可以在产品类别小工具中配置分类的排序、显示分类下的产品数量、体现层级关系、隐藏无产品的空的分类等。

WooCommerce小工具

譬如下图中,我隐藏了空分类、显示了产品数量。

WooCommerce小工具

如果你想使用伸缩式的产品分类,而主题又不提供这种效果的话,你可以查看这篇教程:WordPress如何制作产品分类伸缩菜单

产品

按照你设置的条件(譬如数量、顺序)展示产品,譬如展示最新产品、推荐产品等等。

下图是这个小工具的配置项,其中woocommerce自带翻译有点不准确,订单其实是排序的意思(Order)。

WooCommerce小工具

好评产品

官方翻译叫做产品按评级,其实就是按照评价从高到低选取前几名的产品。

WooCommerce小工具

小工具效果如下

WooCommerce小工具

产品搜索

这是一个产品搜索框工具,如下所示

WooCommerce小工具

产品标签云

你可以在编辑产品时,给产品打标签,每个产品可以有多个标签

WooCommerce小工具

在产品列表页添加产品标签小工具后,如下图所示,可以让用户快速的找出具有相同标签的产品。

WooCommerce小工具

最新产品评价

展示你的商品收到的最新的评价,你可以控制显示的评价数量。

WooCommerce小工具

最近浏览过的产品

展示浏览者最近看的产品,所以展示内容是因人而异的。

WooCommerce小工具

当你使用WordPress搭建一个外贸网站时,尤其是B2C外贸卖货网站(又或者叫做跨境电商),大概率会用到WooCommerce来管理产品、订单、配送、收款等等。本系列的WooCommerce教程是基于官方文档以及我的操作实践,在阅读本文前,建议先阅读我的B2B外贸建站教程,先搭建一个B2B外贸网站,然后再深入WooCommerce的电商功能。

友情提醒:在接下来的操作实践中,你可以直接右键翻译界面为中文,或者将WordPress的用户管理界面语言设置为中文,但站点语言设置为英文,以便你容易理解功能。同时,下文中的大部分截图都是采用中文的,鉴于WooCommerce的汉化不一定完整,如遇到英文界面不易理解的,请采用鼠标右键用谷歌翻译吧。

安装WooCommerce插件

请进入你的WordPress网站后台

  1. 点击安装插件
  2. 输入关键词woocommerce搜索
  3. 在woocommerce插件卡片中点击现在安装
  4. 安装完成后,点击Activate激活

安装WooCommerce

激活WooCommerce

相关教程:如何安装Wordpress插件(3种方法)

WooCommere安装向导

WooCommere插件激活后,将自动进入安装向导界面

WooCommerce安装向导

如果你是WooCommerce新手,请按照向导的步骤逐步填写;如果你已经很熟悉WooCommerce,可以点击最下方的skip setup store details跳出,后续自行配置。接下来,我们跟随向导一步步操作。

首先是填写店铺地址信息,点击继续,将能看到如下提示,点击继续即可

WooCommerce安装向导

接下来勾选你的商品的所属行业类目,可以多选的哦~选完后点击继续

WooCommerce安装向导

接下来是选择商品的类型,通常做跨境电商的,大多选择实物产品,然后继续。注意:下图中标注的付费功能不用选,等你搞清楚基础功能了再来了解他们也不迟。

WooCommerce安装向导

接下来,WooCommerce想要收集一些你的业务信息,下图填写的内容供你参考,其中Facebook 、mailchimp 、google ads后续都能按需安装,现在先别装了,然后点击继续。

image 57 - 工业机械 | B2B外贸模板网站安装包

接下来是选择一个WordPress主题,我推荐使用Astra主题,而在这个界面是选不了Astra的,所以点击继续我的活跃主题即可。

Astra主题提供了很多的免费的商城模板,并且是一个轻量的、热门的主题,非常值得你一试,请查看我写的:Astra免费版的全免费外贸建站教程

image 58 - 工业机械 | B2B外贸模板网站安装包

接下来是安装向导的最后一步,点击“不,谢谢”即可,我们目前用不上国外的税务功能,同时jetpack在提高速度网站安全方面,我推荐使用:WP RocketWordfence

image 59 - 工业机械 | B2B外贸模板网站安装包

至此,安装向导结束,我们将自动进入下图所示的WooCommerce的首页。

image 60 - 工业机械 | B2B外贸模板网站安装包

如果你跳过了安装向导,但又想再次进入安装向导,那么可以如下图所示操作:

进入woocommerce》设置,点击顶部的“帮助”按钮,在展开的面板中点击“安装向导”标签,你便能点击“安装向导”按钮进入了。

image 79 - 工业机械 | B2B外贸模板网站安装包

WooCommerce设置清单

你可以在首页右侧看到一个任务清单(如下图),逐个点击任务,按照引导去完成操作,能让你快速了解店铺的基本设置,接下来我们逐一操作。

image 61 - 工业机械 | B2B外贸模板网站安装包

添加产品

点击上图清单中的第一条:添加产品,我们将看到三种方案:

  • 手动添加(推荐):通常我们多用这种方法
  • 导入:建议先熟悉手动添加,如果产品特别多,再考虑使用导入产品功能
  • 迁移:这是付费的,由Cart2Cart提供服务,譬如可以从shopify迁移到woocommerce

image 62 - 工业机械 | B2B外贸模板网站安装包

如果你想在外贸网站建设期间导入一些测试使用的产品数据,通常有两种方式:

设置付款方式

当你点击“设置付款”后,将能看到Woocommerce推荐的、适合你的店铺所在区域的付款方式,根据店铺所在区域不同,你看的付款方式有所不同。

譬如我将店铺地址设置在中国内地,那么推荐的付款方式有下图几种,其中paypal是购物时直接付款,要求开通Paypal商家账号才能正常接入到网站中,其他两种是线下/离线付款方式。

image 64 - 工业机械 | B2B外贸模板网站安装包

而如果将店铺地址设置在中国香港,系统还提供了Stripe选项。最近我在注册Stripe时,要求必须输入香港身份证(护照号码被拒),所以内地注册已经行不通了。

image 65 - 工业机械 | B2B外贸模板网站安装包

如果在线支付因某些原因行不通(譬如你是soho,没有企业),你就只好另外的两种离线付款方式。

如果你点击paypal的set up按钮,系统会为你自动安装和激活woocommerce paypal插件(WooCommerce PayPal Checkout Gateway),然后需要你自行连接paypal商家账户。

image 68 - 工业机械 | B2B外贸模板网站安装包

点击paypal账户的“连接”按钮后,你将看到如下界面,填入你的注册邮箱或者已有的paypal账户,选择国家,然后next

image 69 - 工业机械 | B2B外贸模板网站安装包

接下来如果你已有paypal账户就会让你登录

image 70 - 工业机械 | B2B外贸模板网站安装包

登录后,如果你不是企业账户,会提示你注册一个企业账户或者升级当前个人账户为企业账户

image 71 - 工业机械 | B2B外贸模板网站安装包

注册企业账户需要填写公司信息和法人代表人信息,往后,我就不操作了,因为我没注册公司(哈哈哈哈),当你注册完公司信息后,会给予你连接网站所需要的秘钥等信息,以便让你填入网站的付款设置中。

image 72 - 工业机械 | B2B外贸模板网站安装包

设置税率

image 66 - 工业机械 | B2B外贸模板网站安装包

设置税率需要你已经设定店铺的位置,然后点击图中的配置按钮前往配置税率。

设置运费

在设置运费界面中,WooCommerce提供的运费配置规则比较简单,一是中国本地运费,二是中国以外的运费

image 67 - 工业机械 | B2B外贸模板网站安装包

此外,你还可以在运费设置中配置不同区域的定额运费,也可以配置不同类商品采用不同运费。

但如果你的运费比较复杂,譬如按照重量、数量等计算运费,请查看【WooCommerce教程系列】如何配置运费费率表Table Rate Shipping

个性化我的商店(装修店铺)

image 73 - 工业机械 | B2B外贸模板网站安装包

1.导入一些测试商品,点击import products按钮即可,导入完成后是如下效果(我安装的是Astra免费主题,如果你是其他主题,可能样式略有不同)

image 74 - 工业机械 | B2B外贸模板网站安装包

2.创建一个首页(homepage),点击create homepage按钮后,woocommerce会自动为你创建一个首页,首页里包含产品信息,看到这里如果你要操作,就打住,看我图下方的话

image 75 - 工业机械 | B2B外贸模板网站安装包

如下图所示,由于我的网站后台语言是中文(前台设置的是英文),在生成首页时,不少文案都是中文的,不美丽了,并且astra主题自带了侧边栏,页面也很奇怪,需要去调整

image 76 - 工业机械 | B2B外贸模板网站安装包

然后这个页面是使用wordpress自带编辑器(古腾堡)制作的,比不上Elementor编辑器制作的页面,所以我不建议执行这一步创建首页的操作。

image 77 - 工业机械 | B2B外贸模板网站安装包

3.接下来是上传网站logo,就不赘述了。

4.最后是填写一个店铺通知,目前啥也不用填,直接点击complete task.

image 78 - 工业机械 | B2B外贸模板网站安装包

至此我们就完成了Woocommerce的设置清单安排的任务。

本篇教程是针对Woocommerce的付费插件Table Rate Shipping(运费费率表)的,我们在进行B2C的购物型外贸网站建设时,可以使用到它配置复杂的运费计算规则。本文是我基于Woocommerce的官方教程翻译的。

运费费率表插件能够创建复杂的、适用于全球配送范围的运费规则。

您可以根据产品的配送区域,配置多个运费费率表,也可以针对每个地区设置多个运费费率表,还可以根据产品的重量、数量、价格、配送方式来添加运费规则。

线上商店的产品和配送需求都不尽相同,接下来将介绍:什么是运费费率表?如何设置运费费率表?真实运费设置案例——以便于你理解如何使用运费费率表。

运费费率表插件是如何运作的

当你的客户在网站的购物车中结帐时,运费费率表插件会根据客户的收货地址,使用您创建的运费规则来计算总运费,你可以为不同的收货地址配置一个或多个运费规则。

要正确计算运费,需要你创建配送区域(shipping zones)和运费规则(shipping rules)。

请在制作运费费率表之前思考和准备如下内容:

  1. 如果您需要为不同类别的产品设置不同的运费规则,那么请设置不同的配送类型(shipping class),运用于不同类别的产品
  2. 思考和设置您支持的配送区域(shipping zone)
  3. 从你选择的快递公司获得运费规则

设置配送类型(shipping class)

配送类型用于标记拥有相似配送方式的产品。

例如,您可能有一个名为“Small”的配送类型,适用于书签产品的运送,而名为“Medium”的配送类型适用于书籍类产品。

您可能还希望将“small”这个配送类型应用于铅笔和钢笔,因为它们的大小和重量相似,并且可以应用相同的运费规则。

您可以为不同的配送类型创建不同的运费费率表。

点击此处查看如何设置产品的配送类型

设置配送区域(shipping zone)

配送区域是指:为指定的国家区域设置特定的配送类型和运费表。您可以为每个区域添加不同的运费费率,以便向不同地区的客户收取不同的运费。

给不同配送区域设置运费费率表

设置了配送区域后,才能添加运费费率

1.前往: WooCommerce > Settings > Shipping.

2.在配送区域下方点击edit按钮进入编辑运费费率

如何配置运费费率表Table Rate Shipping

3.点击配送方案(shipping methods)下方的add shipping method按钮添加新的配送方案

如何配置运费费率表Table Rate Shipping

4.在弹出层中选择下拉选项里的table rates(运费费率表),然后点击添加配送方案按钮(add shipping method)

如何配置运费费率表Table Rate Shipping

至此,运费表便添加成功并出现在页面上,接下来需要去编辑运费费率表的内容

设置运费费率表

1.点击运费费率表下方的Edit按钮,你将会进入运费费率表编辑页面

如何配置运费费率表Table Rate Shipping

2.接下来如下图所示,我们来设置运费费率表的内容

如何配置运费费率表Table Rate Shipping

  • 配送方法标题/method title:向客户显示的配送方法名称。例如,如果一个区域有两种配送方法:DHL、中国邮政,你可以设置标题为:DHL、China Post
  • 纳税状态/tax status:定义运费是否应该纳税,包含选项:应纳税、无。
  • 运费中的税/tax included in shipping costs:定义运费表中的运费是否含税。
  • 手续费/handling fee:额外的费用。可以是固定金额(譬如2.50),也可以留空,表示不收取手续费。
  • 最高运费/maxium shipping cost — 你可以为当前配送方案设置一个最大运销。如果按照下方运费表计算的运费大于这个最高运费,那实际运费将使用此处填写的最高运费。

3/ 设置运费费率

运费费率设置

如何配置运费费率表Table Rate Shipping

选择计算方式:告知插件如何计算客户购物车内商品的运费,有如下计费方式:

  • 按订单计费:计算整个购物车的运费。如果客户的购物车中有不同的配送类型(shipping class)的商品,则将使用具有最高优先级的配送类型。(详见下文示例)
  • 按每个商品计算运费:分别计算客户购物车中每个商品的运费,然后统计求和为最终运费。
  • 按每行商品计算运费:查看购物车中的每一行的商品(多个同一种商品只算为一行),同一行的多个商品只计费一次,在编辑运费表时需填入基础运费(row cost)才能正确运用它。
  • 按配送类别计算运费:基于购物车中的产品的配送类别来计费。

站长备注:这个费率表配置起来确实有些复杂,边配置边做测试吧

举例:

一个客户的购物车内有如下商品:

商品数量商品配送类型
2红色T恤小号包裹
1绿色T恤小号包裹
1黑色套头衫中号包裹

下表是小号包裹与中号包裹的运费与优先级(优先级越高,数值越小,1比2优先)

配送类型单个配送运费优先级
中号包裹10元2
小号包裹5元1

按照不同计费方式计算的运费如下

按订单计费按每个商品计费按每行商品计费按配送类别计费
5元25元
2*5+1*5+1*10=25
20元15元

  • 按订单计费:5元,取自优先级为1的小号包裹计费,不计算物品数量,共计5元。
  • 按每个商品计费:25元,3个小号包裹3*5=15元,1个中号包裹10元,共计25。
  • 按每行商品计费:20元,共3行商品,2行小号包裹2*5=10元,1行中号包裹10元,共计20元。
  • 按配送类别计费:配送类别有两种,分别为小号包裹5元和中号包裹10元,共计15元,即便有多个小号包裹都之计费1次。

5.输入每个商品的手续费

将固定的附加费用添加到每个商品的运费中

6.输入每个商品的最低运费

7.输入每个商品的最高运费

8.输入运费表

将运费添加到运费表中

如何配置运费费率表Table Rate Shipping

配送类型(shipping class)

选择你填写的运费规则将适用的配送类型,您还可以选择将它运用于“任何配送类别”或“无配送类别”的商品。

条件(condition)

此列告诉插件应该使用哪些产品信息来计算运费,选项如下:

  •  – 你不使用商品信息来计算运费
  • 商品价格
  • 商品重量
  • 商品数量
  • 相同配送类型的商品数量

请记住,同时要按照上文的计费方式来计算运费。

最小值/最大值(min-max)

您所选条件的最小和最大值:

  • 商品 – 最低和最高价格
  • 商品重量 – 最小和最大重量. 请在WooCommerce > Settings > Products中设置商品重量单位。
  • 商品数量 – 商品的最小和最大数量。例如,您可能希望对1-50个商品使用一个运费,而对50个以上商品使用另一个运费
  • 相同配送类型的商品数量 – 特定配送类型中的最小和最大商品数量。

如果您要填写商品的最小和最大值,请确保您的商品数量与一个人可能订购的数量相同。例如,对于商品计数,最好将最大值设置为999,这将确保运费能计算出来。

中断

当你选中这个选项时,你是在告诉插件:如果计算到了运费表的这一行,就停止进一步的计算。意思是,你在告诉程序中断后续计算。

这用于:

  • 按订单计费 – 告诉插件提供一个特定的运费费率,而不使用其他运费费率。
  • 计算 – 停止任何进一步的运费计算,并优先考虑位于运费表顶部的费率,这在计算合并配送时很重要(看下文示例)

中止

如果你勾选这个选项,那么当客户购买的商品刚好匹配你设置的这条运费费率时,则客户会查看到你填写的中止原因。

譬如:你希望客户购买不足50元商品,只能本地自提,就需要用到中止功能(查看示例)。

运费

  • 行运费/Row cost – 运送这个商品的基础费用,其中可能包含你的包装费用。
  • 单个物品运费/Item cost – 每个商品的运费
  • 每KG运费/ kg cost– 商品的每公斤重量的运费
  • % 运费/ % cost– 按照商品总额的百分比计算运费的

标签

你可以为每个运费费率添加一个标签用于说明它。

配送类型优先级

如果您在WooCommerce>Settings>Shipping>Shipping Classes下创建了Shipping Classes(配送类型),并且选择了“Per Order/按订单计费”作为计算类型,您将看到一个名为“Class Priorities/类型优先级”的配置项。

如果购物车中有不同配送类型的物品,则将根据具有最高优先级(即数值最小)的配送类型中的物品来计算运费。在下图的示例中,名为Hoodies的配送类型比Default类型更重要。

如何配置运费费率表Table Rate Shipping

合并配送

有时您可能希望合并特定产品的配送。例如,假设您有一个书签和一本书,书签属于小型包裹配送类型,而书是中型包裹配送类型。如果客户订购了一本书和一个书签,那么您可以这两个商品的配送捆绑在一起,无需向客户收取单独运送书籍和书签的费用。

如果书签的运费是2.50美元,而书的运费是5美元,那么运费是5美元,而不是7.5美元。

要正确合并商品配送,您需要确保将运费表设置为:最高运费在表格顶部,最低运费在表格底部。

你需要做的是告诉插件:沿着这个运费表往下走,当你遇到第一个匹配的条件时就停止。

要想简单的合并运费,你需要:

  1. 选择计费方式:按配送类型计费
  2. 在运费表中创建运费,最高运费位于表格顶部,在我们的书籍和书签示例中,中型包裹配送类型的运费的位置需要高于小型包裹配送类型的。
  3. 确保“中断”选项是勾选的

让我们来看看运费表中运费的“顺序”和勾选“中断”复选框的区别在哪里。

在下图示例中,运费表设置是正确的。“Medium”配送类型的运费是位于“Small”配送类型运费之上,“Break”复选框已勾选,它告诉插件在满足第一个条件时就停止后续的计算。此时,客户的运费为5美元。即书签正确地与书捆绑在一起计算运费和发货。

如何配置运费费率表Table Rate Shipping

在第二个示例中,“Medium”配送类型的运费是正确地位于“Small”之上,但未选中“Break”复选框。这意味着插件会计算运费表中所有的条目,并最终得出7.50美元的运费。

如何配置运费费率表Table Rate Shipping

在这个示例中,“small”配送类型的运费选中了“中断”复选框,并且是位于“medium”配送类型的运费之上,当插件通过运费表进行计算时,当遇到勾选了“中断”复选框的运费条目时,就会停止向下进一步计算,此时,向客户提供的价格为2.50美元,这是书签的运费,而不是书的运费。

如何配置运费费率表Table Rate Shipping

在最后一个示例中,运费表格中的“small”高于“medium”,并且未选中“中断”复选框。这一次,插件会计算每一行的运费并求和,最终得出7.50美元的运费。

如何配置运费费率表Table Rate Shipping

对运费表所做的细微调整都将影响您的最终总额。下面是一个在线T恤商店的运费表设置实例,能有助于你理解这个插件的运作。

实际案例

配送多个相似商品

小戴开了一家T恤店,人们经常一次买好几件T恤。他设置的基本运费是2美元,然后每件T恤增加1美元的运费,为了创建他的运费规则,小戴执行以下操作:

  1. 创建一个配送类型——小号包裹(small),适用于所有T恤。
  2. 创建一个配送区域:Zone 1
  3. 选择计费方式:按配送类型计费
  4. 创建如下规则:
    • 配送类型 – small
    • 条件 – 相同配送类型的商品数量
    • 最小值:1 最大值:1000
    • 基础运费(Row cost) – 2
    • 单个物品运费 – 1

他的运费表如下设置:

如何配置运费费率表Table Rate Shipping

当客户购买T恤时,运费如下:

  • 1件T恤: $3=2+1
  • 2件T恤: $4=2+1*2
  • 3件T恤: $5=2+1*3

将多个运费规则应用于同一配送类别

对小戴来说,目前一切都很顺利,但他意识到,当人们购买超过50件T恤时,基础运费就会上涨。他需要增加另一个费率。原始费率的最小值=1和最大值=49。他还补充了以下规则:

  1. 配送类型 – small
  2. 条件 – 相同配送类型的商品数量
  3. 最小值:50 最大值:1000
  4. 基础运费 – 10
  5. 单个物品运费 – 1

他的运费表如下设置:

如何配置运费费率表Table Rate Shipping

当客户购买T恤时,运费如下:

  • 购买49件T恤的运费为$51=(49*1)+2
  • 购买50件T恤的运费为$60=(50*1)+10

不同配送类型的商品合并配送

小戴销售T恤相当成功,所以他决定开始销售套头衫。当顾客购买一件套头衫和一件T恤时,他可以将T恤和套头衫包装在一起。所以他不想单独收取运费,他运送一件套头衫的基本价格是5元,每件套头衫的运费是3元。接下来要为寄送套头衫创建运费规则

  1. 创建一个配送类别-medium,并应于所有套头衫
  2. 打开配送区域Zone 1
  3. 创建如下规则:
    • 配送类型 – medium
    • 条件 – 相同配送类型的商品数量
    • 最小值:1 最大值:1000
    • 基础运费 – 5
    • 单个物品运费 – 3

他的运费表如下设置:

如何配置运费费率表Table Rate Shipping

正如在合并配送一段中所说的,最昂贵的配送类别需要位于运费表的顶部,这将确保只向客户收取套头衫的运费。

按重量计算运费

小戴决定更换一家快递公司。对他来说,按重量发货更划算,所以他需要重新考虑运费,快递公司提供的新价格为:

  • 0-750g: $2.70
  • 751-1000g: $4.30
  • 1000g-2000g: $8.30

这个案例的计算方式是按订单计费,即根据整个订单的商品重量计算运费。

小戴需要在运费表中添加三行,每一行对应上文中的运费价格,将条件设置为“重量”,填入最小和最大值,这些运费规则将适用于任何配送类型。

如果您的快递公司向您报价的是每公斤运费,而不是阶梯价格,您可以将条件设置为“无”,并将运费填入“每KG运费”一列。

向客户提供多种配送方案

小戴想给他的客户尽可能多的配送方案,所以他决定为客户提供运输区的第一和第二类邮件的选择。为此,他执行以下操作:

  • 将他的最初的运费表命名为方案1
  • 进入配送区域,点击添加运费方案按钮(Add Shipping Method
  • 创建新的运费表,名为方案2
  • 选择按订单计费,并添加运费信息

常见问题

如何注明“免费送货”?

如果你将运费费率设置为0,您需要填写标签栏来向客户说明这一点,并建议在购物车和结帐页面显示“免费送货”等信息。

本文是读者们在使用Elementor进行外贸建站时遇到的问题与解决方法。本文不断更新,有问题请留言。

可以用Elementor编辑WooCommerce产品吗?

可以,请看下图,在Elementor设置的文章类型中,勾选产品并保存。然后你在编辑产品时,就能看到使用Elementor编辑按钮了。

image 41 - 工业机械 | B2B外贸模板网站安装包

Elementor能编辑产品的哪一部分内容?

可以用Elementor编辑产品的详细介绍,也可以认为是产品的正文而产品的简介(short description)是无法使用Elementor编辑的。

image 43 - 工业机械 | B2B外贸模板网站安装包

如何使用Elementor编辑Custom post type ui定义的文章

与上文同理,请在下图的Elementor设置中勾选你添加的文章类型并保存

此图像的alt属性为空;文件名为image-41.png

使用Custom post type ui添加的新文章类型可以用Elementor Pro制作列表页和详情页模板吗?

可以,譬如你可以用Custom post type ui(CPT UI)添加名叫case的文章,便于管理公司的案例,如果你想以类似博客的形式展示case,那么你在用CPT UI添加case时,需要注意下图中的配置:将hase archive选择为true,这样以来,才能用Elementor Pro制作针对case的文章列表模板(Archive),然后发布模板时设置display condition为case archive即可。

image 44 - 工业机械 | B2B外贸模板网站安装包

用Elementor编辑商店页面/产品首页报错

原因是:这个页面在woocommerce的设置中已被设为商店页面,所以不可以再用Elementor编辑,如果你一定要编辑它,那么请尝试:先取消它作为商店页面,再用Elementor编辑。

image 45 - 工业机械 | B2B外贸模板网站安装包

如何用Elementor制作图文等比缩放的首页Banner?

有读者反馈希望banner不因设备尺寸的改变而改变布局,譬如:不希望文字把背景图片挡住,又希望图片能完整显示....emm,你只有把文案做到图片里直接作为banner了。

以Elementor Pro为例,你需要使用slider元素,将图片上传到背景中,同时设置size:contain,然后点击height(高度)旁边的设备图标,切换到不同设备上,分别设置图片的高度,以便图片宽度能完整显示。

image 46 - 工业机械 | B2B外贸模板网站安装包

接下来,切换到这个banner的content标签页,将内容、按钮都清空,设置link(链接),将链接方式(apply link on)设置为whole slider。

image 47 - 工业机械 | B2B外贸模板网站安装包

如果你使用的是免费的Elementor,那么你需要使用 Premium Addons For Elementor 高级元素扩展中的Premium Carousel / 轮播来制作banner。

推荐教程:

Astra主题教程:免费建外贸网站(入门级)或2020年B2B外贸建站的终极教程 (进阶级)

Elementor教程

在使用WordPress进行外贸网站建设时,我们常用WooCommerce进行产品的管理,而在产品列表页中,我们会在侧边栏中使用小工具(widget)展示产品分类(product categories)和产品子分类,以方便用户快速筛选目标产品,目前在Astra主题当中,不提供产品分类的伸缩/折叠菜单功能(如下图所示效果),我们可以使用插件Iks Menu – WordPress Category Accordion Menu来实现它。下文我将会逐步介绍如何通过Iks menu制作产品分类伸缩式筛选功能。

product categories accordion - 工业机械 | B2B外贸模板网站安装包

安装插件iks menu

你可以直接在WordPress网站后台安装iks menu,并激活它。相关教程:如何安装Wordpress插件(3种方法)

image 24 - 工业机械 | B2B外贸模板网站安装包

创建产品分类筛选菜单

接下来在后台找到iks menu菜单并将进入,点击create按钮创建。

image 25 - 工业机械 | B2B外贸模板网站安装包

填写标题并点击下一步

image 26 - 工业机械 | B2B外贸模板网站安装包

选择taxonomy并点击下一步

image 27 - 工业机械 | B2B外贸模板网站安装包

选择product categories并点击Finish,你可以同理制作文章分类、文章标签、产品标签的可折叠菜单

image 28 - 工业机械 | B2B外贸模板网站安装包

此时产品分类的伸缩菜单已经创建完成,我们去编辑一下他

image 29 - 工业机械 | B2B外贸模板网站安装包

在编辑页面中,你讲看到如下图所示的data标签页,我们可以配置分类中展示的内容、展示的顺序,譬如启用show posts,那在点击产品分类后,会展示分类下的产品。

image 32 - 工业机械 | B2B外贸模板网站安装包

继续data的配置,你也可以hide empty terms,这样没有产品的分类就不会展示,反之同理;

此外很重要的是分类的排序,插件提供了多种排序方式,譬如按照分类的名字排序,也可以按照产品数量排序(这是我常用的排序方式),然后我会配置为降序排列(DESC),这样以来,产品数量多的分类就会展示在上方

image 30 - 工业机械 | B2B外贸模板网站安装包

下图是我的常用配置,供参考,其他未提及的配置项都是保持默认配置的。

image 33 - 工业机械 | B2B外贸模板网站安装包

除了data配置,你还可以依次点击menu、display、manage、skins查看配置功能,如果搞不懂这些,就保持默认,我通常会在display中取配置颜色、间距信息。

image 34 - 工业机械 | B2B外贸模板网站安装包

最后,iks menu还提供了几个免费的皮肤供你选择,选完皮肤后,点击右上角的保存按钮,然后会出现publish按钮,点击它。

image 31 - 工业机械 | B2B外贸模板网站安装包

然后你将能在弹出层面中得到短代码(shortcode),复制它,使用短代码可以将产品分类筛选放到任一页面上,下文我会以Elementor为示例讲解。

image 35 - 工业机械 | B2B外贸模板网站安装包

当然你也可以把它放到侧边栏的小工具中,请进入widget标签页,点击go to widgets

image 36 - 工业机械 | B2B外贸模板网站安装包

将产品分类菜单加入到侧边栏中

接下来进入wordpress的appearance》widget页面,找到iks menu后,点击右侧的三角,在展开的选项中,找到woocommerce sidebar或product sidebar。

image 37 - 工业机械 | B2B外贸模板网站安装包

如果你想在产品列表页展示分类筛选,就选择woocommerce sidebar,如果你想在产品详情页展示分类筛选,就选择product sidebar,最后点击add widget按钮。

需要注意的是,你必须要将产品列表页或产品详情页配置了侧边栏,相关教程: Astra主题教程:免费建外贸网站--给产品页面添加侧边栏

当你把iks menu加入到woocommerce sidebar或product sidebar中后,将能看到下图所示效果,如果你创建了多个iks menu,记得在id中进行选择,并点击save按钮保存

image 39 - 工业机械 | B2B外贸模板网站安装包

然后我们进入产品列表页查看一下,便能看到产品分类筛选了,如下图所示,图上方是astra自带的产品分类筛选功能(不可伸缩),图下方是iks menu制作的可以伸缩的。注意:免费版的iks menu不支持在分类后方统计产品数量。

image 40 - 工业机械 | B2B外贸模板网站安装包

把产品分类菜单放入到页面中

以我最爱的Elementor页面编辑器为例,请使用Elementor编辑目标页面,然后在左侧面板中找到shortcode元素,拖拽到右侧画布中你想放的位置

image 38 - 工业机械 | B2B外贸模板网站安装包

然后将上文中复制的shortcode黏贴到输入框中,如下图US欧式,你将能看到产品分类菜单已经放入到页面中了。

image 20 11 11 11 16 14 - 工业机械 | B2B外贸模板网站安装包

相关教程:使用Elementor Pro的B2B外贸建站教程

推荐教程:Elementor教程

最近我开始折腾国内的LOYSEO外贸网站建设教程分享网站,目的是为了体验一下百度SEO😂,趁着双11买了很划算的腾讯主机(700元多3年2核4G3M带宽),买了域名做了备案,在宝塔面板中安装WordPress后,后台界面提示更新WP,结果更新失败,原因是国情使然,于是谷歌一下便找到了非常简单的解决方法——手动安装一个WP China Yes插件,请点击此处前往插件官网下载,因为WordPress插件库已经下架了它。具体安装方法请查看这篇教程:如何安装Wordpress插件(3种方法)

激活插件后,在后台的设置中能看到wp china yes的配置页面,通常保持默认即可。然后你便可以愉快的直接从后台更新WordPress、安装插件了😊。

image 23 - 工业机械 | B2B外贸模板网站安装包

最后,由衷感谢插件作者:wp中国本土化社区。

基于Elementor编辑器,出现了很多优秀的元素扩展,当你觉得Elementor自带的元素块不够用的时候,那么,元素扩展插件就能派上用场了。今天要介绍的是Premium Addons for Elementor,是我在制作《Astra主题教程:免费建外贸网站》时使用的,用它制作首页的轮播广告(slider)。它不仅提供了数十个免费的元素块(也叫widget小工具或addon,下文我统一称为元素块),还有很多一键导入即可使用的模板块。下文我会逐一介绍免费的元素快及其实例预览,而实例一部分取自插件自带的模板库,一部分由我制作。

持续更新中,还没写完,写一点发布一点~

Premium banner / 高级banner

下方是Banner元素块的实例,背景图配文字的形式,亮点是悬停时的动画效果,目前是6种。

character 1 - 工业机械 | B2B外贸模板网站安装包

Jenny

Strong Independent Girl

flowers wood banner - 工业机械 | B2B外贸模板网站安装包

Premium Banner

Nulla vitae elit libero, a pharetra augue.

building 4 - 工业机械 | B2B外贸模板网站安装包

Architecture Agency

We Work at All Scales and in All Sectors
Request a Quote

如果你想导入这个元素的模板,如下图所示操作,在用Elementor编辑页面时,点击五角星图标打开模板库。

image 98 - 工业机械 | B2B外贸模板网站安装包

然后选择widget/addon类型来筛选模板并导入到页面中,未标记Pro的都可以免费使用。

image 97 - 工业机械 | B2B外贸模板网站安装包

Premium Blog / 文章博客

Elementor Pro自带的博客元素块(post)是没有筛选、轮播功能的,但Premium addons for elementor提供的premium blog提供了这个功能,它可以让文章列表实现筛选/轮播/翻页,下方为筛选博客的实例。

你可以选择筛选的目录、配置展示的文章数量、配置文章展示的内容(评论、分类、标签、作者、日期、图片、摘要)。


ChemiCloud主机测评、选购要点、建外贸网站教程

|
2020-10-16
我执着于寻找性价比高、速度快、服务好的WordPress主机,以备自己和外贸建站客户所需。Chemicloud […]


WordPress建站主机推荐与对比:Siteground、GreenGeeks、Chemicloud

|
2020-10-08
下方对比的三个主机:Siteground、GreenGeeks,都是适合WordPress外贸建站的主机。
本文只比较提供服务端缓存的主机套餐,因为它对网站速度影响很大,网站速度慢会导致客户流失。
易用性方面我更推荐Siteground;而从价格方面考虑,我更喜欢GreenGeeks。
建议初次购买尝试1-2年,到期后可采取换主机商的方式避免续费后的高价。


Astra主题教程:免费建外贸网站

|
2020-09-20
超详细15000+字的外贸建站Astra教程,图文、视频兼备。除了域名和主机,WordPress主题、插件通通 […]


购买Siteground的WordPress主机的注意事项

|
2020-09-01
Siteground是wordpress官方推荐的三大主机之一,且五星好评率高达92%,它曾经是价格低于10美 […]

Premium button / 按钮

相比Elementor自带的button元素的单一动效,这个按钮元素块拥有丰富的动态效果,示例如下,请将鼠标置于按钮上方预览效果。


从上到下滑动


从下到上滑动


从右到左滑动


从左到右滑动


纵向向内快门


纵向向外快门


横向向外快门


横向向内快门


纵向缩放快门


横向缩放快门


向左倾斜快门


向左倾斜快门


右侧淡入按钮


左侧淡入按钮


按钮从上滑入


按钮从下滑入


按钮从左滑入


按钮从右滑入


径向向内


径向向外


矩形向外


矩形向内

Premium carousel / 轮播

这个元素块能够让Elementor制作的任何内容都能实现轮播(如下方示例,示例有点歪,因为我的文章右侧有侧边栏,将就看效果即可),譬如你在制作首页首屏的轮播广告时,每张轮播你都可以单独设计,发挥脑洞进行创意吧。我在《 Astra主题教程:免费建外贸网站》便使用它制作了Banner。

mobile app kit 1 - 工业机械 | B2B外贸模板网站安装包
mobile app kit 2 - 工业机械 | B2B外贸模板网站安装包
mobile app kit 3 - 工业机械 | B2B外贸模板网站安装包
mobile app kit 7 - 工业机械 | B2B外贸模板网站安装包
mobile app kit 9 - 工业机械 | B2B外贸模板网站安装包
mobile app kit 8 - 工业机械 | B2B外贸模板网站安装包
taxi mobile app kit 1 - 工业机械 | B2B外贸模板网站安装包
taxi mobile app kit 2 - 工业机械 | B2B外贸模板网站安装包
taxi mobile app kit 3 - 工业机械 | B2B外贸模板网站安装包
new mobile app kit 1 - 工业机械 | B2B外贸模板网站安装包
new mobile app kit 2a - 工业机械 | B2B外贸模板网站安装包
new mobile app kit 3a - 工业机械 | B2B外贸模板网站安装包

Premium countdown / 倒计时

这是一个倒计时元素块,时间单位可以放在数字下方,也可以放在数字右方,时间单位也可以自行翻译。国外的WordPress主机WordPress插件在做促销时会经常用到这个元素块。

Premium counter/ 计数器

计数器元素块很适合在建外贸网站时介绍公司的亮点/优势,譬如:员工数量、项目数量、工厂面积、生产线数量。Elementor也有计数器元素块(counter),但元素块内不包含图标,当然你也可以用Elementor的Icon box来实现类似的效果,只是数字不能滚动。

不过,计数器的标题(title)默认是h4,目前不能修改为p或span或其他html标签,导致我的目录导航里出现了不和谐的内容?

0

Employees

0

Events

0

Projects

0

Followers

Premium Dual Heading / 双标题

这个双标题元素可以将标题分为两段,以便设置不同的样式效果,下方是官方提供的示例效果。

Premium Addons

不同颜色

Premium Addons

动画图片背景

Premium Addons

渐变颜色背景
Premium Addons
文字阴影
Premium Addons
标题加边框
Premium Addons
标题为块元素(会换行)

Premium Addons

图片背景

Premium Addons

动画渐变颜色

Premium Addons

纯色描边
Premium Addons
文字字体或样式不相同
Premium Addons
标题加背景颜色

Premium Addons

标题带链接

Premium Fancy Text / 花式文案

这是
文案
这是

  • 一个花式的
  • 一个动态的
  • 一个超酷的

文案

上方示例中,动来动去的文案便是花式文案,可以设置多组文案切换,花式文案前后都可以添加一些固定不动的文案,简称前缀后后缀,文案的动画速度是可控的,也能设置文案的颜色、背景、动画效果等等。下方图片是这个元素的内容与样式设置配置。

image 99 - 工业机械 | B2B外贸模板网站安装包

Premium Media Grid / 媒体网格

这个媒体网格真的很棒,你可以直接在元素设置中管理图片、视频,每张图片都可以设置自定义的链接,也可以点击图片显示大图,还提供了分组筛选功能。


building-4.jpg


图片+本地视频

视频可以用youtube、vimie或者上传到网站里的

character-1.jpg


图片2

图片添加了链接


7.jpg
图片3

点击图片可查看大图

下面是这个元素块的部分设置,记得填写分类时,categories里添加的分类,与图片中填写的category能一一对应上。

image 100 - 工业机械 | B2B外贸模板网站安装包

Premium Image Button / 图片按钮

上文我们介绍过普通的动效按钮,这又来了个图片按钮,可以为按钮添加背景图片与动画效果,嗯,更酷炫了。


Image Button


Download Now


Horizontal Overlap


Vertical Overlap

Premium Image scroll / 图片滚动


waimao dianqi template - 工业机械 | B2B外贸模板网站安装包

这个元素可以制作长图滚动预览。

你可以将鼠标放到左边的图片上查看这个元素的效果。

你可能注意到LOYSEO的网站模板栏目使用了这种长图纵向滚动预览效果,然而我是用代码+元素块组合实现的,如果早点发现这个插件的图片滚动元素,那我就不用消耗那么多脑细胞了?。

图片滚动功能可以实现:

  • 纵向滚动,横向滚动(特别适合清明上河图这种横向长图);
  • 从上向下滚动、从下向上滚动;从左向右滚动、从右向左滚动
  • 鼠标悬停时触发滚动、手动拖拽触发滚动;
  • 可控制图片显示高度
  • 可在图片上叠加鼠标图标
  • 可在图片上叠加蒙层
  • 图片可以加链接,链接支持动态调用
  • 图片支持动态调用,譬如取用当前文章/产品的封面图
  • ...

Premium Image Separator / 图片分隔

paragliding.png

图片分隔一般用于装饰,譬如你看到上方的降落伞小人,它就是个图片间隔。你除了可以选择图片,还能选择用图标或者动画来进行间隔。

通常付费的WordPress主题都会提供导航菜单固定在页面顶部的功能,英文名sticky header,而如果使用免费WordPress主题,那则不一定提供导航固顶功能。此时,我们可以使用插件来实现:将WordPress导航菜单固定在页面顶部。

安装插件并激活:Sticky Menu, Sticky Header (or anything!) on Scroll

image 90 - 工业机械 | B2B外贸模板网站安装包

我们在WordPress后台的settings中找到Sticky Menu (or Anything!)菜单,点击进入

image 91 - 工业机械 | B2B外贸模板网站安装包

接下来我们要查看一下导航的sticky element的,我使用的是Astra外贸建站教程里的模板,你需要打开你的网站,鼠标右键位于导航上,点击右键后,在菜单中点击检查/inspect。

然后你将看到导航所处的代码片段,找到有<header 的代码段,当你点选这段代码时,页面中的导航也会处于选中状态,那说明你正确的找到了导航的代码段;

接下来在代码段中找到class="" 或者id="",获取双引号内的一个class或id内容即可,譬如下图所示,class的双引号内有多个class内容,多个内容之间用空格间隔了,通常获取第一个即可;更保险的方式是获取id的内容,因为id一定是唯一的,而class不一定唯一,而不唯一将无法准确定位内容。

image 92 - 工业机械 | B2B外贸模板网站安装包

我将id的内容masthead填入,注意id前加#号,class前加一个英文的句点.

如果你不想在小屏幕上固顶导航,譬如手机上浏览网页时不想固顶导航,可以设置下图第二个红框的数值为768。设置完成后,点击左下角按钮保存。

image 95 - 工业机械 | B2B外贸模板网站安装包

如果你发现导航在随页面滚动时,会被页面上的内容压住,那说明导航的层级不够高,你可以在这个插件的设置中,进入advanced settings标签页,将z-index设置为9999并保存即可。

image 93 - 工业机械 | B2B外贸模板网站安装包

至此,大功告成。

如果你使用的是Astra免费主题,并且使用了透明导航,那么不建议使用这个插件实现导航固顶功能,因为透明导航滚动后会与内容交融在一起。如下图所示。

image 94 - 工业机械 | B2B外贸模板网站安装包

推荐阅读:

我执着于寻找性价比高、速度快、服务好的WordPress主机用于外贸网站建设Chemicloud是我在用Ahrefs挖掘WordPress主机,以及Siteground、GreenGeeks的同行时找到的,它是一家年轻的主机商,成立于2016年,目前4岁,通过Ahrefs探查它的自然用户流量,月均2000+,Trustpilot用户评价4.9/5分,来自111名用户评价,0差评。

鉴于它的价格属于低档的,评价也很好,于是我便买来用用看,并安装了我自制的B2B模板站来进行速度监测、宕机监测(正常运行时间监测)。结果就在下面~

这篇文章的结构是:买→用→测

如何选择与购买Chemicloud主机套餐

image 20 10 16 11 34 27 - 工业机械 | B2B外贸模板网站安装包

如图所示,Chemicloud的WordPress主机分三档,低配没有一键还原和安全防护,所以直接淘汰了;

中配对比高配没有服务端缓存(memcached、OPache)等,即速度比高配要慢,按照我个人对速度的追求习惯,通常我都选择高配。但是,高配有点贵啊。

高配一次性买三年仍然需要10.95美金/月,基于省钱和新主机的观察考虑,我一般是买一年换一个主机或者换个号新买便宜套餐,所以,我最终选择了中配套餐(wordpress pro)1年期进行尝试(8.95美元/月,买1年;7.95美元/月,买2年;6.95美元/月,买3年),如果好用就保留(下文有实测数据,事实证明买中配就可以了);如果速度差,就退了再买高配尝试一下。

由于咱们是WordPress建站,记得要在chemicloud官网选择WordPress hosting菜单下的主机套餐哦~原因看下图,如果不小心选错了,也没关系,可以找在线客服切换的(因为我就买错了,哈哈哈),我大白天找他们解决,几分钟就处理了,真7*24h。

此图像的alt属性为空;文件名为image-65.png

image 66 - 工业机械 | B2B外贸模板网站安装包

在上图中,选好中配的Pro套餐后,点击order now,就进入下图的输入域名页面,chemicloud提供终生免费域名(不用主机了就要收费),但如果你退款,就要扣除域名费用。

我通常自备域名,所以选择I already have a domain,输入域名后,点击use

这里输入域名有点奇特,域名后缀是在第二个框中单独输入的,如下图中的com;第一个框里输入域名,譬如www.loyseo (记得最后一个.不要输入)

chemicloud tutorial 2 - 工业机械 | B2B外贸模板网站安装包

接下来就是确认套餐配置,选择购买的月数(12、24、36月)、服务器位置(就客户近的原则选择主机位置),其他选项保持默认即可(不用买扩展的配置),选完后点击右侧continue按钮,这里有个续费价格(Annually),目前的价格只有首购优惠,续费都是恢复原价,我都靠重买或换主机用来省钱。

chemicloud tutorial 3 - 工业机械 | B2B外贸模板网站安装包

chemicloud tutorial 4 - 工业机械 | B2B外贸模板网站安装包

chemicloud tutorial 5 - 工业机械 | B2B外贸模板网站安装包

接下来完善账户信息,姓名、邮箱、电话、地址、密码、密保。

chemicloud tutorial 6 - 工业机械 | B2B外贸模板网站安装包

然后选择支付方式:信用卡、paypal,用paypal支付时记得更换兑换选项,别用paypal默认的人民币支付,汇率高。

chemicloud tutorial 7 - 工业机械 | B2B外贸模板网站安装包

支付完成后,你能收到邮件通知,用账号登录chemicloud后,我们就开始来建站。

ChemiCloud主机建站教程

如何找到Chemicloud主机的Name Server

如果你是自备的域名,则需要进行解析配置,通常我用NS来解析,这样省事,当然你也可以直接在域名注册处添加A记录进行解析。如下图所示,获取服务器的IP地址(server IP),在域名注册处添加A解析记录。

好,咱们用NS来就解析,首先,如下图所示,进入dashboard后,在主机记录右侧,点击叹号就可以查看服务器的NS(nameserver),然后按照这篇教程去做NS解析:如何使用NS进行域名解析

image 34 - 工业机械 | B2B外贸模板网站安装包

解析完成后,我们继续在Dashboard里点击Cpanel按钮进入管理面板,以便安装SSL和安装WordPress。

image 35 - 工业机械 | B2B外贸模板网站安装包

如何在Chemicloud中给网站安装SSL证书

进入Cpanel面板首页后,找到security栏目下的lets encrypted ssl,点击进入

image 36 - 工业机械 | B2B外贸模板网站安装包

找到域名,点击右侧的+issue按钮

image 41 - 工业机械 | B2B外贸模板网站安装包

进入后,所有选项保持默认,点击issue按钮即可

image 38 - 工业机械 | B2B外贸模板网站安装包

等待提示安装成功,返回。

image 39 - 工业机械 | B2B外贸模板网站安装包

你将在SSL页面看到安装成功的SSL记录

image 40 - 工业机械 | B2B外贸模板网站安装包

安装完ssl后,我们就去安装WordPress,直接安装https开头的网站。

如何在Chemicloud中安装WordPress

点击Cpanel左上角九宫格,回到面板首页,找到Software栏的WordPress,点击进入。

image 42 - 工业机械 | B2B外贸模板网站安装包

然后点击Intall now按钮

image 43 - 工业机械 | B2B外贸模板网站安装包

接下来填写安装信息,参考下图文案提示。

image 44 - 工业机械 | B2B外贸模板网站安装包

image 45 - 工业机械 | B2B外贸模板网站安装包

image 46 - 工业机械 | B2B外贸模板网站安装包

点击完上图的install按钮后,静待安装完成,如下图所示。

image 47 - 工业机械 | B2B外贸模板网站安装包

接下来你可以自制网站,如果想免费自己建站(主题、插件都不花钱),请看这篇《Astra主题教程:免费建外贸网站》

如何在ChemiCloud中添加新域名网站

如果你想在ChemiCloud中创建多个网站,请进入cPanel首页,找到Domains,点击进入

image 72 - Chemicloud建站教程

然后点击Create a new domain按钮

image 73 - Chemicloud建站教程

接下来将新域名填入下图中的domain输入框,不仅可以填入主域名(譬如:domain.com),也可以填入子域名(chemicloud.domain.com)。其他输入框的内容保持默认即可,建议不勾选share document root,避免网站文件内容与已有的网站混合。最后点击submit按钮提交。

image 71 - Chemicloud建站教程

接下来重复上文的域名解析、安装SSL证书、安装WordPress即可创建新的域名网站。

如何在Chemicloud中克隆网站

如果你想做站群或者测试站点,那么可以使用这个克隆功能,我很喜欢这个功能,能快速克隆已经做好的网站,你只需要按照上一章的办法准备一个新域名或子域名即可。

image 74 - Chemicloud建站教程

点选上图中的克隆按钮后,你将看到如下界面,请选择域名,如果你已经给网站安装了ssl,则可以直接选择https开头,一般建议先去创建域名的ssl证书,然后再来创建网站。

如果你的网站暂不想被搜索引擎收录,就勾选disable search engine visibility。

最后点击提交即可创建克隆站点。

image 75 - Chemicloud建站教程

如何在Chemicloud中给网站开启Cloudflare CDN

在网站上线后,可以给网站开启CDN进行全球加速,请进入cPanel面板首页,找到cloudflare按钮,点击进入

image 76 - Chemicloud建站教程

如果你还没有cloudflare账号,请先按照界面上的提示注册一个;如果已经有cloudflare账号了,那直接登录,系统会自动处理,你将看到如下界面。

image 78 - Chemicloud建站教程

此时请查看页面底部的按钮,先remove domain from cloudflare。

image 80 - Chemicloud建站教程

然后你会看到下图,你将能看到两个按钮,第一个表示使用cname进行cdn,第二个是使用dns的方式进行cdn,通常选择第一种会比较方便,因为第二种还需要将域名服务器再切换到cloudflare。

image 79 - Chemicloud建站教程

如果你点选了第一种cname方式,那么提交后将能看到下图所示效果,通过cname实施了CDN。

image 81 - Chemicloud建站教程

接下来我们去启用CloudFlare Railgun,依旧在cpanel里的cloudflare页面,进入home首页,在页面下方有一个Railgun,将它启用即可。

image 133 - 工业机械 | B2B外贸模板网站安装包

Chemicloud主机测速

导入B2B外贸模板站

我用Hello elementor主题+Elementor(pro付费版)制作了一个B2B外贸模板站,详见这篇《2020年B2B外贸建站的终极教程》,我将用这个模板站进行速度测试。

在ChemiCloud安装完WordPress后,登录网站后台,使用All in one wp migration 插件导入模板,默认chemicloud只提供了100MB的上传上限,可以安装 all-in-one-wp-migration-file-extension插件来扩展至512MB;如果上传比较慢,请将科学上网软件的节点换到服务器位置。

重申一下主机配置:我选购的是WordPress Pro主机,服务器位于美国,没有服务端缓存加速配置。如果有条件,买服务端缓存加速配置的turbo套餐更好。

注意,最好在域名解析过了24h之后再测速度,因为部分区域解析未生效时,测速不准。

我选了pingdom和fastorslow来测试速度,前者可以长期监控4个国家的网站访问速度,后者只能单次测试,但每次可以查询世界各地18个地区的。要知道的是,每次测试结果都会不完全相同,会有网络波动影响。

Pingdom测速

我使用了pingdom的长期监测进行测试,每半小时自动测一次,下面的截图都是均值数据。

首先我选择的是Astra主题默认安装,没导入模板,没用缓存插件,没有开启CDN,用Pingdom在4个国家进行了测试。得分91,加载时间在1s左右。但是,这并不是真实网站模拟,所以我用了自制的B2B模板站来进行测试。

image 60 - 工业机械 | B2B外贸模板网站安装包

我将自制的B2B模板站搬到了chemicloud,这个网站已经配置了WProcket,我还做了一些其他优化,然后用Pingdom监测(半小时自动测一次),在未开启CDN时,四个区域的速度都不错,首页测速都没有超过3S。(也说明我做的模板优化的不错,O(∩_∩)O哈哈

image 67 - 工业机械 | B2B外贸模板网站安装包

同时,我还用Pingdom每隔一分钟监测网站是否在线,也就是监测宕机时间,chemicloud官宣每年的uptime在99.99%,由于监测需要时间,监测数据就定期更新吧,下图看来是100%uptime。

image 70 - 工业机械 | B2B外贸模板网站安装包

Fastorslow测速

除了用pingdom,我还用fastorslow进行了单次测试(非长期监测),由于网络波动,每次测试结果都会有些不同。具体测试数据如下

image 68 - 工业机械 | B2B外贸模板网站安装包
这是chemicloud的整体测试数据,挺不错哟~还没开CDN加速呢

image 69 - 工业机械 | B2B外贸模板网站安装包
这是chemicloud首字节的测试数据,服务器与测试地址越近,时间越短,能看得出来美国区域数据优秀

对比siteground的fastorslow测试结果,emm,不如chemicloud

siteground fastorslow test
这是siteground首字节的测试数据,服务器与测试地址越近,时间越短

对比GreenGeeks的fastorslow测试结果,与Chemicloud的接近,略微差一点,GreenGeeks价格也便宜一点(便宜1美金/月)。

greengeeks fastorslow test

总结

综合看来,Chemicloud是值得的选择,客服即时、速度快、面板Cpanel好用(但相比之下,SiteGround的面板用起来更易用清爽一些)、用户评价也好,如果是初做外贸建站,购买中配的WordPress Pro套餐即可。

推荐后续阅读:

Brizy跟Elementor一样,都是WordPress页面编辑器。Elementor很棒,但Brizy提供了一个直观的云模板库功能,也就是用Brizy做的页面模板或模块模板,都可以同步到云端,然后在其他网站上都能同步下来直接使用,为此我买了Brizy Pro来体验。

感受:Brizy云模板库的功能确实不错,Elementor虽然有插件Templately能够提供同样的云模板库功能,但是不能直观可视化模板内容。然而,相比Elementor编辑器,Brizy的有个更大的硬伤,它的元素不仅少,而且元素的设置功能也少,这是让我最终放弃他的原因,老老实实的用回了Elementor(你赢了)。

举例:我在用Brizy仿造一个网页时,网页里有如下图所示的内容,下图是用Elementor的icon list元素制作的,而在brizy里没有元素可以实现....(╯‵□′)╯︵┻━┻

image 28 - 工业机械 | B2B外贸模板网站安装包

image 29 - 工业机械 | B2B外贸模板网站安装包

好了,既然已经体验了,接下来我还是把Brizy的一些小亮点说一下,也许正好应了你的需求呢~毕竟,每个人需求不一样,而且brizy比elementor便宜,Brizy是49美金/年/3个网站;299美金终生;而Elementor没有终生版本,49美金/年/1个网站。

image 30 - 工业机械 | B2B外贸模板网站安装包

Brizy的行(setion)都可以变成slider(轮播/广告)

这个功能在免费的Brizy中就可以使用。

如下图所示,在使用Brizy制作页面时,鼠标悬浮于模块内容时,所在模块的右上角将显示配置按钮(下文统一称作模块设置图标),点击它。

image 2 - 工业机械 | B2B外贸模板网站安装包

然后点击第一个配置按钮(名叫Block),将能看到下图中的选项:make it a slider。开启后,能将这个模块变为轮播。

image - 工业机械 | B2B外贸模板网站安装包

将模块设置为slider后,如下图所示效果,将出现切换用的箭头与圆点。

image 1 - 工业机械 | B2B外贸模板网站安装包

image 3 - 工业机械 | B2B外贸模板网站安装包

继续点击模块设置图标,在Block设置中,切换到slider标签页,可以设置slider的自动播放、切换点与箭头的款式。

image 4 - 工业机械 | B2B外贸模板网站安装包

在第三个图标(color)中可以设置切换点与箭头的颜色,但是不能配置尺寸。

还可以给每个slider分别设置背景图、背景视频或背景地图;

image 5 - 工业机械 | B2B外贸模板网站安装包

image 6 - 工业机械 | B2B外贸模板网站安装包

当设置背景图时,还能设置hover(鼠标悬停)模式下的背景图。

这个任一“行”都可以变为slider的功能在Elementor编辑器里是没有的,是Brizy插件的一个小亮点,Elementor提供的Slider功能足够常规使用,毕竟一个企业网站的Slider通常也就一个。

Brizy可以将自制模板存储到云端

这个功能仅限于付费版Brizy

Brizy针对模块、页面都可以存储到模板库,并同步到云端线上模板库,并且每个模板都是直观的预览模式,而我喜欢的Elementor并不提供云端模板管理功能,虽然可以使用云端模板插件(Templately)来管理,不过它提供的是文字列表式展示模板。

Brizy的模板管理更加直观,当在其他网站使用同一个Brizy账号时,可以将云端模板库同步到这个网站中,这对建站服务商是很有用处的,大大提升建站效率。

image 7 - 工业机械 | B2B外贸模板网站安装包
Brizy的模板库是直观预览模式

image 8 - 工业机械 | B2B外贸模板网站安装包
Elementor的云端模板库插件Templately是文字列表式查看模板

这个功能对我很有吸引力,以至于我买了Brizy Pro来深度研究,不过遗憾的是,Brizy的元素设置项比不上Elementor丰富,Elementor更强大,而Brizy也提供了一些Elementor没有的小众功能,譬如上文提到的行转Slider,还有云模板库功能。

Brizy VS Elementor

在Elementor 3.0发布之前,Brizy在官网宣传时,特地与Elementor进行对比,其中包含上文提到的云端存储模板功能,另一项我认为比较重要的差异是:Elementor没有一键换配色功能,而Brizy是提供的。

但是当Elementor 3.0发布之后,Elementor的全局配色管理功能甚至比Brizy更加强大了,后者只有8个颜色配置项,而Elementor可以有N个。真是..强者愈强啊

image 9 - 工业机械 | B2B外贸模板网站安装包

image 10 - 工业机械 | B2B外贸模板网站安装包

最后总结:我肯定还是用Elementor,它的元素配置真是太强大了,叠加一些第三方扩展就更厉害了,适合中高阶的建站需求。而普通的展示型企业网站,是可以考虑用Brizy的,元素功能够用,价格便宜。

推荐阅读:

按月购买
$14.95/月

  • 前往购买
购买12个月
$7.95/月

  • 前往购买
购买24个月
$6.95/月

  • 前往购买
购买36个月
$5.95/月

  • 前往购买
购买48个月

  • 前往购买
续费
14.95美元/月

  • 前往购买
退款时间
30天
付费方式
paypal / 信用卡
网站数量
不限个
服务器位置
美国, 加拿大, 荷兰
存储空间
不限G
备份
每日自动备份
备份保留1天
支持按需备份与一键还原
带宽上限
不限
主机配套
免费CDN服务端缓存免费邮箱免费SSL免费新域名1年免费转入域名1年免费网站迁移服务1次
月访问次数
不限
客户服务
售前及时聊天客服工单7×24


按月购买
$3/月

  • 前往购买
购买12个月
$4/月

  • 前往购买
购买24个月
$5/月

  • 前往购买
购买36个月
$6/月

  • 前往购买
购买48个月

  • 前往购买
续费
10美元/月

  • 前往购买
退款时间
30天
付费方式
paypal / 信用卡
网站数量
1个
服务器位置
美国, 日本, 英国
存储空间
10G
备份
每日自动备份
备份保留30天
支持按需备份与一键还原
带宽上限

主机配套
免费CDN免费邮箱免费SSL
月访问次数
10000
客户服务
售前及时聊天客服售后及时聊天客服工单7×24



如果你忘记了你的WordPress网站的用户名和密码,只要能进数据库,都能分分钟修改密码。

此外,如果你使用了我在B2B外贸建站教程中的制作的模板站,也需要用这个方法修改用户信息和密码。

首先,请在主机的管理面板中找到数据库的管理入口,通常是phpmyadmin。以Siteground主机为例,在Sitetools中,进入左侧菜单:Site>MySQL,就能找到数据库管理入口。如果你用的主机是Cpanel面板,在面板页面中就有phpmyadmin入口。

change your wordpress password in the database

GreenGeeks等使用Cpanel的主机中,可以在Cpanel首页找到phpmyadmin进入数据库。

image 63 - 工业机械 | B2B外贸模板网站安装包

进入数据库后,在左侧点击相应的数据库,右侧会出现这个数据库的表,你可以输入关键词user去搜索用户表,找到用户表之后,点击它进入。

change your wordpress password in the database

进入用户表后,你将看到用户数据,点击编辑按钮。

change your wordpress password in the database

进入编辑页面后,如下图所示,找到用户登录信息和密码信息进行修改,密码要记得选md5,修改完成后,点击右下角的go按钮提交即可。

change your wordpress password in the database

思路:用Elementor Pro制作产品详情页模板(single product)和询盘表单弹出层(popup),在产品详情页模板上添加一个询盘按钮,将按钮链接设置为dynamic调用popup即可。

注意,不要将Ninjaform、Wpforms、contact form7制作的表单放到Elementor的Popup中,会出错:无法显示表单或无法提交表单。

视频教程

视频教程中用到的是Neve主题免费版提供的免费购物网站模板,安装了插件ElementorElementor proElementor Contact Form DB



图文教程

下面这篇图文教程是我在制作B2B外贸建站教程时的用到的,用在我的模板站上的,并且,我将询盘表单元素做成了全局通用的Global元素,譬如点击按钮弹出询盘表单的popup、联系我们页面的表单都共用同一个询盘表单,避免重复工作量。

具体操作步骤如下:

  1. 配置发件邮箱账号,在wordpress后台安装SMTP插件并设置发件功能
  2. 安装插件ElementorElementor proElementor Contact Form DB并启用
  3. 在WordPress后台,进入templates> popup,点击add new,添加新的popup

elementor popup - 工业机械 | B2B外贸模板网站安装包

  1. 进入popup编辑页面后,可按需导入模板,或直接关闭模板页面自行制作
  2. 将heading和form元素加入到页面,如下图所示

wordpress-elementor-询盘表单配置-1

6.设置需要用户必须填写的字段,并显示*标记;你也可以在左侧新增字段,默认情况下是name、email、message三个字段,建议字段不要过多,降低用户填写难度,还可以添加一个honeypot字段,这个字段不会出现在页面上,只会出现在代码里,用于避免一些垃圾邮件。

wordpress-elementor-询盘表单配置-7

7.将调整完毕的form元素右键存储为Global元素,以便于在其他地方重复使用

wordpress-elementor-询盘表单配置-5

8.发布表单,并将条件设为全站,保存即可,不需要设置其他(triggers或advanced rules)。PS:如果你想设置询盘表单在某些条件下自动弹出,譬如用户浏览两页后弹出,可以设置triggers和advanced rules。

wordpress-elementor-询盘表单配置-6

9.如果需要在产品页面点击询盘按钮时弹出询盘表单,请在elementor中添加single product产品详情页模板,在模板中添加询盘按钮,然后在左侧按钮设置中,点击link 右侧的dynamic 按钮(图中的2),在下拉选项中选择popup,然后继续点击popup,在setting中搜索并选中刚才添加的popup

wordpress-elementor-询盘表单配置-4
设置按钮的link值为popup

wordpress-elementor-询盘表单配置-3
搜索已添加的popup名称,并选择

10.此时,点击询盘按钮,将可见到询盘弹出窗口

wordpress-elementor-询盘表单配置-2

11.我们在任一产品页面提交询盘进行测试,查看是否能收到询盘邮件通知以及后台是否记录,询盘邮件将发送到你的wordpress账户邮箱里,如需添加收件邮箱,请在询盘表单中进行配置,多个邮箱之间用英文逗号间隔即可。同时,在此处也能设置通知邮件的标题、正文。

wordpress-elementor-询盘表单配置-8

在发完测试询盘后,我们查看邮箱是否收到邮件(注意检查垃圾邮箱),同时在后台Elementor DB中查看询盘记录,如下图所示,大功告成。

wordpress-elementor-询盘表单配置-8-1

默认Woocommerce产品页面是没有询盘联系表单的,用免费插件Custom Product Tabs for WooCommerce可以给产品页面添加询盘联系表单标签页。

下图是添加完询盘表单标签页的最终效果,这是我在Astra外贸建站教程中的示例。

此图像的alt属性为空;文件名为astra-tutorial-2020-09-19_17-58-42.png

教程思路:用插件Custom Product Tabs for WooCommerce添加一个标签页,其中放入用Ninja forms制作的联系表单的短代码(shortcode),然后在添加产品时加入这个标签页即可,具体操作步骤如下:

1.请安装并激活插件Custom Product Tabs for WooCommerce,相关教程:插件安装教程

2.在网站后台找到custom product tabs菜单,进入后点击add tab

astra tutorial 2020 09 19 16 54 10 - 工业机械 | B2B外贸模板网站安装包

3.如下图所示,依次输入标题、名称,然后切换内容框到text模式,从ninja forms的dashboard页面获取表单的shortcode,黏贴到tab content中,最后点击save tab即可。

astra tutorial 2020 09 19 16 56 28 - 工业机械 | B2B外贸模板网站安装包

4.然后我们去编辑一个示例的产品,给它添加这个询盘标签页。

进入网站后台,在all products页面任意选一个产品,点击edit按钮进入编辑

astra tutorial 2020 09 19 17 55 46 - 工业机械 | B2B外贸模板网站安装包

5.在编辑产品页面时,滚动页面到下图所示位置,进入custom tabs标签页,点击add a saved tab

astra tutorial 2020 09 19 17 56 15 - 工业机械 | B2B外贸模板网站安装包

6.然后选择刚才添加的标签页即可。

astra tutorial 2020 09 19 17 57 09 - 工业机械 | B2B外贸模板网站安装包

7.如下图所示,标签页已经成功加到这个产品里了,我们在页面右上方找到update按钮,点它发布产品。

astra tutorial 2020 09 19 17 57 29 - 工业机械 | B2B外贸模板网站安装包

8.然后我们查看一下这个产品,能看到Enquiry询盘标签页已经成功加入了。

astra tutorial 2020 09 19 17 58 42 - 工业机械 | B2B外贸模板网站安装包

emm(。•ˇ‸ˇ•。)这个插件的免费版只能一个个给产品添加询盘标签页,但咱们可以用复制产品功能省点力气,所以不买付费版也是可以的,既然走免费这条路子,那就贯彻到底吧,如果想便利一些,那不如买个Elementor Pro,能够自定义产品页模板,灵活度更高,当然学习难度也比较大一些。附:学习Elementor的推荐教程如何在WordPress中制作联系表单(3种方法)-内含用Elementor Pro制作弹出式询盘表单的方法。

本文是用Avada的实操教程来讲解“为啥劝你不要用Avada”的劝退系列。不用Avada,我们能省下很多时间和脑细胞还有教程费。

Avada是Themeforest上热卖top1的主题,几年前我在接触WordPress建站时,接触的第一个主题就是它。国内看到的最多的WordPress建站教程,也是基于Avada,包括很多外贸建站教程的推荐主题也是Avada,那个时候页面编辑还是用的后端编辑器,做完页面后发布预览才能看到实际的样子。

初次用Avada时,我很惊喜,内心欢呼:我终于可以做自己的网站啦!直到我接触了Elementor,一切都翻天覆地的变了,不再见了吧Avada。

几年以后的现在,Avada有了前端可视化编辑页面功能,我很开心的打算用一用看看(说好的不再见呢?),然而,Elementor依旧没让我失望的赢了。

空口无凭,且看实际操作吧。

本文演示使用的是Elementor Pro,毕竟Avada是付费的,就不拿免费版Elementor做对比了。

用Avada和Elementor分别创建首页Slider

什么是slider?首页第一屏一般都有几张滚动的广告大图,图上放点文字和按钮,这货叫做slider。

我们看下Avada的操作流程是如何的

  1. 在WordPress后台的avada菜单里,找到sliders并进入
  2. 在页面下方添加一个slider,保存

avada vs elementor 4 - 工业机械 | B2B外贸模板网站安装包

  1. 再添加多个slider page,关联到刚才添加的slider

avada vs elementor 3 - 工业机械 | B2B外贸模板网站安装包

avada vs elementor 2 - 工业机械 | B2B外贸模板网站安装包

真的是纯图文界面,按钮配置里都是代码

  1. 再回到首页,用avada编辑,添加元素slider到页面中,添加完长这样...我还得回到后台去调整图片、文字、动画等样式,反复折腾。

avada vs elementor 20 9 23 16 30 10 - 工业机械 | B2B外贸模板网站安装包

接下来我们看下用Elementor制作Slider的步骤

  1. 用Elementor编辑首页
  2. 添加元素slider到页面中,在页面中直接调整图片、文字、按钮、动画等样式,所改即所得~舒心~

avada vs elementor 20 9 23 16 38 59 - 工业机械 | B2B外贸模板网站安装包

所以,优胜者是Elementor,省时省事,交互更友好。

Avada和Elementor的文章元素对比

文章元素一般用于首页和博客列表页,Elementor的文章元素比avada的可扩展性以及可配置性更强。

譬如,文章的数据源:在Elementor中,不仅能取用文章,也能取用自定义的文章类型以及产品,而avada的文章元素只能取用文章。

avada vs elementor 20 9 23 17 30 44 - 工业机械 | B2B外贸模板网站安装包
avada的文章元素

avada vs elementor 20 9 23 17 35 53 - 工业机械 | B2B外贸模板网站安装包
Elementor的文章元素

Tips:Elementor的文章元素也能用来展示产品,是不是很棒棒~

不仅如此,Elementor的开放性使得它有很多第三方扩展元素,譬如:UAE, Essential Addons for Elementor,Elementor – Header, Footer & Blocks Template, 在WordPress官方插件库搜索适用于Elementor的扩展插件,搜索结果有49页之多,而Avada只有9页。

Avada和Elementor的模板库对比

先看下头部header的模板吧,Avada只有预制的7套样式,无法扩展更多和自定义。

Elementor的模板是可以无限扩展的,你还可以自己设计,同时Envato研发的 Envato Elements插件也设计了很多的现成的header 模块以及整站模板几百套,可以一键导入模板后再修改。

avada vs elementor 20 9 23 17 47 02 - 工业机械 | B2B外贸模板网站安装包
avada的header选项

avada vs elementor 20 9 23 17 55 24 - 工业机械 | B2B外贸模板网站安装包
Elementor自带的header模板

值得一提的是:Themeforest就是Envato公司的,而Avada是Themeforest市场里的最热卖的主题,但Envato并没有为Avada做扩展插件,而是为Elementor制作了专门的网站模板扩展插件Envato Elements,因为Avada是封闭式的,而Elementor是可扩展的生态式运作,并且,Envato Elements的模板供应来源是世界各地的设计师,可想而知Elementor的受欢迎程度了。

avada vs elementor 20 9 23 17 58 25 - 工业机械 | B2B外贸模板网站安装包
Envato Elements提供了很多免费的元素模块

avada vs elementor 20 9 23 17 58 59 - 工业机械 | B2B外贸模板网站安装包
Envato Elements提供了很多免费的整站模板

最后,建议你可以亲自体验以下,如果想要Avada正版,可以联系我,免费提供正版,我在很久之前买的,现在闲置了,能够提供key;

如果想体验Elementor,它有免费版的,你可以先体验用一下,结合这篇 Astra主题免费版建外贸网站教程,这篇教程用的是免费Elementor和免费Astra主题。

如果想购买Elementor Pro,记得看这篇Elementor购买避坑和省钱技巧。

如果想学习Elementor,可以查看我写的Elementor教程。若遇到问题,可以联系我咨询交流~

许多WordPress主题都会用Google字体,然而,Google字体并不存储在网站本地,它是一个第三方资源,这会影响网站的加载速度,让网站变慢,尤其当你的网站面向的是国内用户时,更需要禁用Google字体。

起初,我用Code snippets代码段来移除主题的谷歌字体,然而发现依旧有漏网之鱼,我又不愿意去细究代码,所以,就找到了两个简单的方法来删除网站中的谷歌字体,以利于提升网站速度

如果你想保留谷歌字体,但又想提升网站速度,可以考虑将谷歌字体本地化,下文中的OMGF插件就能实现谷歌字体本地化。

如何检查自己的网站是否使用谷歌字体

请使用工具https://gtmetrix.com/,输入你的网站,点击analyze按钮,在检测结果中(如下图所示),进入waterfall标签也,点击fonts,就能看到字体中是否有谷歌字体,字体所在的域名是fonts.gstatic.com。

astra tutorial

当我用下面的方法把谷歌字体移除后,加载时间减少了0.6s,requests请求数也降低了

remove google font wordpress

接下来,我们看看禁用谷歌字体的具体方法

用OMGF插件移除谷歌字体

remove google font wordpress

OMGF插件活跃安装20000+,五星好评,最近一次更新是4周前,看起来是个有人维护的优质插件,并且这个插件本身是为了将谷歌字体本地化的,如果你不想禁用谷歌字体,也可以将字体本地化。

  1. 安装并启用omgf插件,安装插件的教程在此
  2. 进入wordpress后台的setting - Optimize Google Fonts页面中,如下图所示,在optimize fonts中勾选automatic模式,保存它。

remove google fonts omgf - 工业机械 | B2B外贸模板网站安装包

  1. 然后进入detection settings标签页,如下图所示设置,将google fonts processing设置为remove only,然后保存,这样就设置完毕了。

image 49 - 工业机械 | B2B外贸模板网站安装包

设置完成后,记得用上文提到的GTmetrix检测一下是否移除成功,也要检查一下你的网站样式是否有样式异常(换个新浏览器用无痕模式查看网站)。

OMGF插件的禁用谷歌字体功能,可能在一些主题上不能发挥作用,此时,你可以用到下文中的autoptimize来替代。

用Autoptimize插件删除谷歌字体

remove google font wordpress

Autoptimize插件是一个免费的网站代码优化插件,可以优化html、js、css文件,提升网站速度,同时,它也提供了google 字体的优化方案,包括禁用谷歌字体。它的活跃安装数量已经达到一百万+,评价也有4.5星,更新也及时,同样是一个优质插件。

  1. 安装并启用Autoptimize插件
  2. 进入WordPress后台的setting - autoptimize页面中,在额外标签页中,选中删除谷歌字体,但需要注意的是,你至少需要启用html、js、css、图像优化任一一项,不然这个移除谷歌字体功能不能发挥作用。如果你使用WP Rocket或其他网站优化插件,那么用OMGF插件更合适;如果你正好缺少优化插件,那么用Autoptimize插件更合适,顺便还能用上优化网站功能了。

remove google font wordpress

结语:在进行外贸网站建设时,也请尽量少用google字体,从系统默认字体里挑选一些即可,字体过多不仅让人眼花缭乱,也会增加网站加载时间、降低网站加载速度。

超详细16000+字的外贸建站Astra教程,图文、视频兼备。除了域名主机WordPress主题插件通通是免费版,零经验的你也能建个靠谱的外贸网站,只要肯花点时间照着步骤做就能行~我选用了大牌的Astra主题,速度快、质量有保证,配套的功能插件也都是选择了用户多、评价好的插件,对起步阶段的外贸Soho自建站很有帮助~

本教程的外贸建站要花多少钱?

  • 域名费用:20~30元/首年,次年起50-60元/年
  • 主机费用:400~900/年
  • 主题费用:0
  • 插件费用:0
  • 教程费用:0

建站基础 - 选购域名和主机

在用Astra主题建外贸独立站之前,先按照如下步骤逐一操作,点击链接可以查看对应教程。

  1. 注册域名(点击文案链接就可以查看注册域名教程了)

推荐我自用的Siteground主机,也是我的读者们选择最多的,SiteGround是WordPress官方推荐主机之一,大品牌,可信用卡/paypal支付(paypal支付需要联系客服),易用性和速度俱佳,美中不足的是续费会恢复原价(国外主机大多是这个策略)。

相关文章:

我将位于Siteground新加坡节点的模板站用fastorslow进行测速,结果如下。

image-181

image 175 - Cloudways主机评测、建站教程、优惠券

下面开始是视频配套图文的教程,鉴于有部分新手读者,对于图文教程中的细节操作存在理解上的困难,所以我配合图文录制了操作视频(无音频),下方的这个视频内容包含:“Siteground创建WordPress网站”到“添加博客页面”。其中,使用Ninjaforms制作表单功能,本站相关文章已经配有视频,就不再此视频中重复录制了。



  1. 买完主机后,去主机上安装WordPress和SSL证书,教程如下
    1. Siteground主机
      1. 如何在Siteground中创建Wordpress网站
      2. 如何在Siteground中给WordPress网站安装SSL证书
  2. WordPress安装完成后,你可以用账号密码登录网站后台,这里还有登录网站后台的4种方法
  3. 安装完SSL后,还需要检查下url是否都改为了https,请看:将网站中的http改为https(2种方法)
  4. 在网站完成以前,设置“建议搜索引擎不收录”

好啦~接下来我们便可以开始安装Astra主题,开始捣鼓网页啦~

安装Astra主题免费版

Astra主题是知名的轻量主题,也就是说它的体积小、网站打开会比较快。网站打开速度慢,用户就都溜了溜了~

1.进入WordPress后台的Appearance 》themes页面,点击Add New按钮

astra tutorial

2.在添加主题页面中,搜索Astra,找到对应主题后,点击Install按钮

astra tutorial

3.安装完astra后,点击Activate激活主题,接下来我们导入网站模板

astra tutorial

相关教程:如何安装wordpress主题(3种方法)

Astra免费版主题如何一键导入网站模板

Astra免费版依旧提供了50+套免费的网站模板(真良心!),网站模板里会包含一个网站常用的必要页面。

进入Appearance 》 Astra option页面,找到右侧的install importer plugin,点它安装导入模板的插件

astra tutorial

安装完成后,我们将看到如下界面,让我们选择网站模板的页面编辑器,这里我们选择Elementor,因为它是时下最热门最好用的Wordpress page builder(页面编辑器)。

astra tutorial

接下来我们看到了模板列表,筛选出免费的模板列表,请根据你的喜好选择模板,我们以下图中的organic store为讲解示例,这是一个电商的网站模板,我们会将它改造为B2B的网站。

astra tutorial

选中模板后,我们可以去预览一下,也可以直接点击import complete site按钮导入所有页面及内容

astra tutorial

在导入设置中,默认会自动安装必要的插件,你可以不导入样式设置(customizer setting)、widgets(小工具,通常用于侧边栏)、content(内容,譬如文章、产品),但对新手而言,我的建议是保持默认设置,点击Import。

若是你想更换模板,为了不引起内容混乱,再次导入时,记得勾选下图中的delete previously imported site,以便删除已有模板的内容和设置。

astra tutorial

接下来我们静静等待网站导入,不要关闭页面,导入完成后将看到下图。

若是导入失败,系统会给与原因提示及解决办法。

若是导入成功,但网站依旧不是模板的样子,那么请二次导入试一试。

此外,部分服务器(譬如WPXhosting)因为安全策略原因,不允许做导入动作,或是导入完成后,依旧还是导入前的老样子,此时,你就需要联系主机商的客服来解决了。

astra tutorial

导入完成后,我们查看一下网站,大功告成。

astra tutorial

由于过多的插件会影响网站的速度和安全,所以用不上的插件就禁用并删除掉。见下图标红的插件:

  • CartFlows和Woocommerce Cart abandonment recovery插件是随模板安装的B2C所需的插件,如果你是制作B2B外贸网站,可以将他们禁用后删除。
  • Starter Templates是导入网站模板时用到的,如果你不需要再导入模板了,也将它禁用并删除。

astra tutorial

设置网站Logo、Icon、名称

网站模板导入完成后,我们开始设置网站的logo、icon(显示在浏览器页卡中的小图标)、网站名称(site title)及标语(tagline)。

如下图所示,在appearance 》 astra option页面中,点击upload logo进入

astra tutorial

astra tutorial

进入后将看到左图,我们依次:

  1. 上传logo,最好用透明的png格式图片,不超过20K。
  2. 设置logo的宽度,在图中我们能看到一个小电脑图标,点击它可以切换到平板、手机设备上的logo宽度设置
  3. 上传网站图标,要求正方形512px,5K左右

astra tutorial

我们继续设置网站的标题和标语

网站标题一般会展示在每个页面的标题中,而tagline一般展示在首页的页面标题中。

当你打开网站,把鼠标放在浏览器标签页中时,就能看到它们,具体如下图所示。

astra tutorial

  • 1是之前上传的site icon
  • 2是网站名称(site title)
  • 3是tagline

相关教程:WordPress安装后必须要做的10件事

修改导航菜单

相关教程:如何在WordPress中制作导航菜单(7个功能点),你可以按照这个片教程给菜单内容进行增加、修改、删除、排序。

去掉菜单中的无用页面

去掉我们用不上的页面,譬如下图中的Account、My account、Cart。

astra tutorial

去掉购物车图标

进入Appearance 》Customize 》 Header 》 Primary menu页面中,将last item in menu从woocommerce(购物图标)设置为search(搜索图标)。

astra tutorial

astra tutorial

在主导航上方添加顶部导航(Astra Pro)

image 153 - 工业机械 | B2B外贸模板网站安装包
箭头所示处就是在主导航上方添加的顶部导航,含社媒、邮箱、搜索。

这是付费版Astra才具有的功能,部分读者跟我反应:想要在顶部加上社交媒体、邮箱、搜索,但在免费版Astra的主题配置里是不提供的,你需要购买Astra付费版,我购买了Astra正版终生授权无限站点进行分销,售价49元/站点/年159元/站点/终生

接下来讲解如何实现上图所示的顶部导航:

请先安装付费的astra pro插件,接下来,进入appearance》astra options界面,这里就是主题的配置页面,以后会常用到的,接下来点击图中的activate all按钮激活所有高级模块(免费版astra无法使用这些功能)。

image 48 - 工业机械 | B2B外贸模板网站安装包

从后台的appearance》astra options页面中,点击header options进入。

image 74 - 工业机械 | B2B外贸模板网站安装包

然后点击above header,顾名思义就是在已有的header上面加一个above header。

image 75 - 工业机械 | B2B外贸模板网站安装包

进入后,我们在layout里点选第二个布局。

image 76 - 工业机械 | B2B外贸模板网站安装包

这种布局提供了两个setion,左边一个setion1,右边一个setion2,默认setion1放的是文本/html,setion 2放的是搜索按钮。

image 77 - 工业机械 | B2B外贸模板网站安装包

如上图所示,如果你要在setion 1中展示邮箱,就复制下面的代码贴入,并修改其中的邮箱地址部分。

<a href="mailto:[email protected]">[email protected]</a>

在当前页面上向下滚动,你讲看到移动端的设置(mobile header),在下方的两张图片中,layout表示布局,有两种布局,你可以理解为横向布局和纵向布局,建议用横向布局,不然手机上header占用的地方太多。

image 78 - 工业机械 | B2B外贸模板网站安装包

image 79 - 工业机械 | B2B外贸模板网站安装包

如果你还想在顶部展示一些社交媒体,而不仅限于邮箱,那么你讲setion 1换成widget(小工具)。

image 80 - 工业机械 | B2B外贸模板网站安装包

然后我们去添加widget的内容,先到astra options页面,激活astra widgets。

image 81 - 工业机械 | B2B外贸模板网站安装包

激活astra widgets后,我们来到appearance》widgets页面,找到下图所示的astra:social profiles,点击它右侧的三角,在展开的面板中找到above header first widget,选中它,然后点击add widget。

image 82 - 工业机械 | B2B外贸模板网站安装包

然后,你将在右侧的above header first widget中看到已经加入的astra:social profiles,我们开始添加社交媒体,点击add item。

image 83 - 工业机械 | B2B外贸模板网站安装包

譬如加入facebook主页链接,如下图所示,输入title、link(你的fb主页链接),将target设置为new page(表示在新标签页打开fb主页)、no follow设为disable,选择icon图标

image 84 - 工业机械 | B2B外贸模板网站安装包

你还可以添加邮箱图标,让客户点击邮箱就可以向你发送邮件,参考下图的设置,注意将link中的邮箱换成你的。

image 87 - 工业机械 | B2B外贸模板网站安装包

如此操作一番,添加你需要的图标与链接,完成后点击右下角的保存按钮哦~

image 85 - 工业机械 | B2B外贸模板网站安装包

上图中的styling部分是用于设计图标样式的,接下来我们就会讲到。

我们先打开网页看一下效果,emm,不大好看呀

image 86 - 工业机械 | B2B外贸模板网站安装包

我们将调整成下图所示的效果

image 89 - 工业机械 | B2B外贸模板网站安装包

请回到这个widgets的配置面板中调整styling,如下图所示,红框内是我的配置,请参考。

image 88 - 工业机械 | B2B外贸模板网站安装包

接下来是个细节的微调,如果你按照上文设置后,查看header,没有发现图标的顶部和底部间距不一致的情况,就不用调整。如果有细微差别,可参考我的调整方法。

如下图所示,请回到astra option的above header配置中,如下图红框所示,将height设置为40,将header space的top设为5,注意5左边的锁链可以单击切换锁定or解锁,下图中是解锁状态。配置完后点击顶部的publish按钮发布。

image 90 - 工业机械 | B2B外贸模板网站安装包

如此这般,above header就做好了。记得切换到平板、手机端查看效果哦~

安装必要的插件

此时网站还是缺少不少功能的,譬如询盘表单、询盘邮件通知等等,请在WordPress后台直接安装下面这些免费插件,相关教程:如何安装wordpress插件(3种方法),安装完成后记得active激活他们。

  • Essential Addons for Elementor:Elementor的元素扩展包,包含了产品、文章、Ninjaforms表单等元素块,Astra免费版和Elementor免费版都不提供这类元素块,并且astra的网站模板里是使用Woocommerce简码实现的产品展示,不利于我们设置。
  • Elementor - Header, Footer & Blocks:用它能用Elementor免费版制作网站的页头、页脚,这个插件在导入模板时已经自动安装了
  • Ninja forms:实现询盘表单
  • Post SMTP:实现询盘邮件通知
  • Custom Product Tabs for WooCommerce:实现产品页面询盘表单标签页
  • Code snippets:可安装功能短代码,譬如:安装google analytics跟踪代码、更换站点管理员地址
  • Wordfence:实现网站安全防护
  • WPS Hide Login:自定义网站登录地址

部分插件此处未提及,在下文中介绍到对应功能,再安装即可。下文我们会逐一介绍这些插件的使用教程以及用处。

网站安全防护

插件安装完成后,按如下两篇教程给网站增加安全防护。

修改联系我们页面

本教程选的模板中缺少了联系表单,我们要将它补充完整,请按下面的教程逐步完成操作。

  1. 用Ninjaforms添加联系表单
  2. 创建免费的企业邮箱
  3. 用Post SMTP配置询盘通知邮件和记录邮件发送记录

接下来,我们将表单放入到联系我们页面中

在网站all pages页面中,找到contact页面,点击edit with elementor。

astra tutorial

在页面左侧的工具栏中,输入ninja搜索,将图中标记有EA的ninja forms元素块,左键按住拖拽到右侧页面中的目标位置。(如果你没安装Essential Addons for Elementor插件,是看不到这个元素块的)

astra tutorial

然后在左侧选择之前制作的表单,Ninja forms元素块在Elementor中编辑时会出现一直在加载的情况,我目前也还没找到解决方案,但实际他在前台是能够正常显示的,所以此问题暂时搁置。

astra tutorial

我们点击页面左下角的update的发布页面,并预览它,如下图所示,表单已经成功显示。

我们接下要修改表单的样式,譬如:隐藏表单标题,修改字段标题的粗细,修改输入框内部的颜色、修改提交按钮的样式。

astra tutorial

表单样式修改完之后是下图所示效果,接下来我们逐一操作。

astra tutorial

隐藏Ninjaforms表格标题

我们依旧还在Elementor编辑联系我们页面中,左键点选刚才在页面中添加的ninja froms表单,如下图所示,在左侧的工具栏中,将Title开关关闭,保存一下页面去预览一下标题是否隐藏成功,如果失败,那么继续下一步。

astra tutorial

去编辑这个Ninja forms,在Advanced - display settings中,将display form title关闭,保存表单后,再去预览联系我们页面,标题会成功隐藏。

astra tutorial

隐藏Ninjaforms表单的标*字段必填的提示文案

在表单标题的下方有一段话:“Fields marked with an * are required”,这个可以说是常识了,无需赘述,所以我们将这段话隐藏,需要用到自定义CSS功能。

1.进入appearance 》 customize页面

astra tutorial

2.点击底部的additional css

astra tutorial

3.添加如下代码后,点击右上角的publish按钮即可。

.nf-form-fields-required {
  display: none;
}

astra tutorial

调整Ninjaforms字段输入框的填充颜色

接着用Elementor编辑联系我们页面的Ninja forms元素,在左侧工具栏的Style中,找到input & textarea,将background color设置为白色#ffffff,这样输入框内的填充颜色就变成了白色。

astra tutorial

调整Ninjaforms字段标题的粗细

astra tutorial 1 29 - 工业机械 | B2B外贸模板网站安装包

继续,在Style标签页中,找到Lables设置字段标题的字体粗细(weight)为400,原来的字体比较粗,改为400会细一些。

调整Ninjaforms提交按钮的样式

继续,在Style标签页中,找到submit button按钮,开始设置

astra tutorial

  • 将宽度(width)设置为全宽,也就是宽度会铺满。
  • 在normal状态下,将background color设置为你想要的颜色

继续选择hover标签,设置鼠标悬停于按钮时的文本颜色(text color)与按钮背景颜色(background color)

astra tutorial 1 25 - 工业机械 | B2B外贸模板网站安装包

astra tutorial 1 26 - 工业机械 | B2B外贸模板网站安装包

此时,样式修改已完成,我们预览一下页面,由于预览时是在管理员已登录状态下查看到的样子,并不是用户真正看到的样子,我们还需要更换一个浏览器或无痕状态下去查看网页是否如意,结果我便发现按钮的异常,在管理员预览模式下是正常的,而换个浏览器时,按钮就变成了圆角,并且不是全宽。(如下图所示)

astra tutorial

于是,我又重新修改了一下按钮的设置,如下图所示,改完后保存、换个未登陆后台的浏览器查看,一切正常了。

astra tutorial 1 30 - 工业机械 | B2B外贸模板网站安装包

  • 将width改为custom,100%
  • 将border radius(按钮的角半径)改为0,这下就会变成直角。

添加博客页面

这套网站模板缺少了博客页面,博客页面可以用于发布产品相关的知识文章、公司动态等,如果不想写博客,emm,那网站收获询盘的可能性就低了许多,你看我们平常买一些大件,也会多方看评测、知识型文章,而这些文章就在潜移默化中决定着我们的购买意愿。

接下来进入具体操作,提供两种解决方案,一种是用Elementor制作博客页面,这种方法复杂一些,不过能学到元素的使用方法;另一种是用主题自带的博客列表模板,这种方法简单,这两种方法你都看一下,因为在第二种方法里介绍了博客详情页的显示项与侧边栏的配置。

用Elementor制作博客页面

这个制作方法没有侧边栏,如果你需要展示侧边栏,请用下文的第二种方法。

  1. 在后台,找到菜单pages》add new,点击进入
  2. 输入页面标题Blog,点击Edit with elementor

astra tutorial

为了保持设计的一致性,我们从about us页面复制标题模块到Blog中

请使用Elementor编辑about us页面,如下图所示,右键点选模块,再点击copy复制标题模块

astra tutorial

然后回到Elementor编辑的博客页面,右键粘贴(paste)这个模块

astra tutorial 12 - 工业机械 | B2B外贸模板网站安装包

粘贴完成后,我们发现跟about页面不一样,用elementor编辑about页面时,顶部未显示导航,因为about页面设置的是透明导航,我们也将blog页面同样设置一下。

astra tutorial

进入后台的all pages页面,找到blog,点击Edit。

astra tutorial

在右下角找到transparent header设置,选择Enabled,然后update页面即可。

astra tutorial

接下来继续用Elementor编辑Blog页面,你可以保存后刷新一下页面,顶部的导航将消失,这表示透明导航生效了。

先修改一下标题,改为Blog,左键点选元素后,在左侧工具栏中将出现这个元素的设置项,如下图所示。

astra tutorial

然后我们向页面中添加文章元素块,在左侧元素栏中,点击右上方的九宫格就能回到元素选择面板,输入post搜索,找到标记有EA的post grid元素,左键点选并拖拽它到右侧页面中。

astra tutorial

如下图所示,目前只能看到一篇博客文章,这是因为咱们还没添加文章呢,你可以按照教程《如何在WordPress中发布和管理文章?》去添加一篇测试用的示例文章,文章要包含封面图片、摘要、分类、标签、正文,然后在文章列表中用EA Duplicator快速复制几篇文章。

astra tutorial

在上图中箭头指向位置,是每页文章数量,默认是4,有点少,可以改为8。

下图是我快速复制制作的9篇文章。

astra tutorial

然后我们继续用Elementor编辑Blog页面,刷新一下页面获取这9篇文章数据。

如下图所示,这个文章元素有很多的配置项,我在下图中用数字标注了常用配置项的对应关系。

astra tutorial

如果你要改文章日期的格式,你要在WordPress后台设置。

astra tutorial
astra tutorial

我把作者头像与名字都隐藏起来了,然后将日期挪到了标题下方,同时显示了文章的分类(在鼠标悬停于图片时才会显示分类),如下图所示。

astra tutorial

你可以尝试一下每个配置的功能,其中若看到配置项名称右侧显示了电脑图标,说明它可以在不同设备上选择不同的设置,这是为了让网站能够灵活的适应电脑、平板、手机设备,也就是响应式设计。

最后我们调整一下文章元素块的上下间距,在元素的advanced标签页设置margin top和bottom的数值,如下图所示,记得锁链图标要解锁,不然margin的每个值都是同一数值。

astra tutorial

最终,你会得到下图这样的博客页面。

astra blog elementor

相关教程:

用Astra默认的博客页面

免费版的Astra也提供了基础的博客页面设置功能的

  1. 在后台,找到菜单pages》add new,点击进入
  2. 输入页面标题Blog,然后直接发布保存
  3. 进入Setting》reading页面,设置posts page为刚才添加的blog页面(如下图所示),然后保存即可。

astra tutorial 20 9 18 17 12 19 - 工业机械 | B2B外贸模板网站安装包

接下来我们去设置一下博客页面,从appearance》astra options页面的blog layouts进入

astra tutorial 2020 09 18 15 17 57 - 工业机械 | B2B外贸模板网站安装包

进入后,我们能看到两个选项,1.用于设置博客页面和文章归档页面的;2.用于设置博客详情页面。

astra tutorial

astra tutorial

这是博客页面的设置,请按图配好,图中的眼睛是内容显示的开关,也可以拖拽内容进行排序

astra tutorial

这是博客详情页的配置,设置完成后记得点击右上角的publish按钮保存。

接下来我们再去设置一下博客页面和博客详情页面的侧边栏,侧边栏一般放博客的分类、搜索框、最新博客文章等等,方便用户使用。

我们依旧在appearance》customize页面,找到sidebar,点击进入,在Blog posts和archives栏,都选择Right sidebar,这表示侧边栏将展示在页面右侧。然后点击publish保存。

astra tutorial

astra tutorial

然后我们去设置sidebar的内容,在appearance》widget中找到main sidebar,如下图所示,我们能看到里头有search(搜索)、recent post(最新文章)等内容了,你可以点击内容右侧的三角箭头展开查看,对不必要的内容进行delete删除。

astra tutorial

譬如Meta通常是不必要的,里头会放置网站的登录地址等功能入口。一般情况下,要保留的内容是搜索、分类、最新文章,是否保留最新评论,看你的需求,譬如你的网站没开放评论,那么也就不必要放这个模块了。

你还可以对侧边栏的内容进行拖拽排序。

astra tutorial

我们还需要设置一下博客页面的面包屑,这是SEO的基础技术之一。

还是在appearance》customize页面,找到breadcrumb,点击进入,如下图所示设置位置和不需要展示面包屑的页面。

astra tutorial

astra tutorial
astra tutorial

然后我们来看下博客页面和博客详情页的样子。

astra blog page
博客(列表)页面

astra post page
博客详情页面

记得将博客页面添加到网站菜单中哦~

修改产品页面

给产品页面添加侧边栏

这个模板本身已经提供了产品列表和产品详情页,我们先参照博客侧边栏的配置方法,给产品列表页与产品详情页添加右侧侧边栏。

我们依旧在appearance》customize页面,找到sidebar,点击进入,如下图所示,将woocommerce和single product设置right sidebar,点击右上角publish保存。

astra tutorial 2020 09 19 12 13 18 - 工业机械 | B2B外贸模板网站安装包

然后我们去设置sidebar的内容,如下图所示,在appearance》widget中找到woocommerce sidebar和product sidebar,目前能看到里头没有任何内容

astra tutorial 2020 09 19 12 14 20 - 工业机械 | B2B外贸模板网站安装包

我们在页面左侧的available widgets中找到产品相关的小工具(widget),将它添加进去就可以了。如下图所示,点击小工具的右侧三角箭头,在下拉选项中找到woocommerce sidebar或product sidebar,点选中它,然后点击add widget,即可将这个小工具添加到对应的侧边栏中。

astra tutorial 2020 09 19 12 15 11 - 工业机械 | B2B外贸模板网站安装包

下图是我加完小工具的侧边栏,分别是产品搜索、产品类目、产品标签。

astra tutorial 2020 09 19 16 44 53 - 工业机械 | B2B外贸模板网站安装包

如果你想给产品页面添加:点击按钮后从侧边滑入的侧边栏(如下图所示,很适合小屏幕,譬如手机),那么你需要购买Astra付费版

image 154 - 工业机械 | B2B外贸模板网站安装包

然后在astra option配置中开启off canvas sidebar即可。

image 20 12 16 17 08 51 - 工业机械 | B2B外贸模板网站安装包

隐藏产品的价格和加入购物车按钮

作为B2B外贸网站,是不需要展示价格和加入购物车按钮的,我们只需要在发布产品时不填写价格即可,这样加入购物车按钮也不会出现。

给产品页面添加询盘表单标签页

目前产品页面没有询盘联系表单,我们需要借助插件Custom Product Tabs for WooCommerce,先用它添加一个标签页,放入之前在Ninja forms制作的联系表单的短代码(shortcode),然后在添加产品时加入这个标签页即可,具体操作步骤如下:

1.在网站后台找到custom product tabs菜单,进入后点击add tab

astra tutorial 2020 09 19 16 54 10 - 工业机械 | B2B外贸模板网站安装包

如下图所示,依次输入标题、名称,然后切换内容框到text模式,从ninja forms的dashboard页面获取表单的shortcode,黏贴到tab content中,最后点击save tab即可。

astra tutorial 2020 09 19 16 56 28 - 工业机械 | B2B外贸模板网站安装包

然后我们去编辑一个示例的产品,给它添加这个询盘标签页。

进入网站后台,在all products页面任意选一个产品,点击edit按钮进入编辑

astra tutorial 2020 09 19 17 55 46 - 工业机械 | B2B外贸模板网站安装包

在编辑产品页面时,滚动页面到下图所示位置,进入custom tabs标签页,点击add a saved tab

astra tutorial 2020 09 19 17 56 15 - 工业机械 | B2B外贸模板网站安装包

然后选择刚才添加的标签页即可。

astra tutorial 2020 09 19 17 57 09 - 工业机械 | B2B外贸模板网站安装包

如下图所示,标签页已经成功加到这个产品里了,我们在页面右上方找到update按钮,点它发布产品。

astra tutorial 2020 09 19 17 57 29 - 工业机械 | B2B外贸模板网站安装包

然后我们查看一下这个产品,能看到Enquiry询盘标签页已经成功加入了。

astra tutorial 2020 09 19 17 58 42 - 工业机械 | B2B外贸模板网站安装包

如何修改询盘提交按钮的配色

你需要添加自定义CSS

1.进入appearance 》 customize页面

astra tutorial

2.点击底部的additional css

astra tutorial

3.在源代码中找到按钮的id,如下图所示,我用的chrome浏览器,将鼠标放在按钮上,右键鼠标后,在右键菜单里找到inspect或检查,点击它可查看到按钮的代码。<input id="xxxx",请将其中的xxxx记录下来,譬如下图中的是nf-field-4

image 85 - 工业机械 | B2B外贸模板网站安装包

请按如下规则组织代码,代码中/**/部分是注释给你看的,你可以删除它;将代码添加到additional css中后,点击右上角的publish按钮即可。

#nf-field-4{
 background:#333333;/*将#333333换成你需要的常态按钮背景色*/
 color: #ffffff;/*将#ffffff换成你需要的常态按钮文字颜色*/
}
#nf-field-4:hover{
 background:#444444;/*将#444444换成你需要的按钮悬停背景色*/
 color: #ffffff;/*将#ffffff换成你需要的按钮悬停文字颜色*/
}

emm(。•ˇ‸ˇ•。)这个插件的免费版只能一个个给产品添加询盘标签页,但咱们可以用复制产品功能省点力气,所以不买付费版也是可以的,既然走免费这条路子,那就贯彻到底吧,如果想便利一些,那不如买个Elementor Pro,能够自定义产品页模板,灵活度更高,当然学习难度也比较大一些。

去掉产品列表页面的多余面包屑

由于上文中开启了astra主题的面包屑功能,但是它不能配置产品列表页面是否展示面包屑,如下图所示,出现了两个面包屑,于是我们用短代码的方式,将woocommerce自带的面包屑去掉。

astra tutorial 2020 09 19 18 18 00 - 工业机械 | B2B外贸模板网站安装包
有个隐藏问题:页面标题与导航上的标题不一样啊!

此时我们要用到code snippets插件,请先学习一下如何添加短代码,然后添加一个新的短代码去掉woocommerce产品列表页自带的面包屑,代码内容如下:

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

去掉产品详情页面的多余面包屑

产品详情页也多了一个面包屑,但这个可以在后台配置,不需要添加短代码。

astra tutorial 2020 09 19 18 18 33 - 工业机械 | B2B外贸模板网站安装包

进入后台appearance 》customize,然后按照下图所示操作,进入woocommerce》 single product,选中disable breadcrumb,点击publish保存即可。

astra tutorial 2020 09 19 18 27 27 - 工业机械 | B2B外贸模板网站安装包

修改产品首页的标题和Slug

上文提到的隐藏问题:产品首页的页面标题和导航菜单里的标题不一样,那是因为在设置菜单时,是可以修改标题的;但页面实际名称还是Shop。

我们进入all pages页面,找到shop页面,点击其下方的quick edit,可以快速修改页面的标题以及slug,都改为Products吧,保持一致。注:slug,你可以当做是url。

astra tutorial 2020 09 19 18 33 34 - 工业机械 | B2B外贸模板网站安装包

至此,一个满足常规使用的产品页面就完工啦,包括产品列表页、产品详情页。

astra tutorial 2020 09 19 18 42 43 - 工业机械 | B2B外贸模板网站安装包
产品列表页

astra tutorial 2020 09 19 18 43 13 - 工业机械 | B2B外贸模板网站安装包
产品详情页

细心的你可能发现我的页面上是有product tags,而你那儿可能没有,那你去修改一下几个产品,在快速编辑或者编辑产品页面的右侧都能找到标签。

添加、编辑产品等产品管理功能

添加产品功能与添加博客文章的功能是类似的,我就不写图文教程了,附一个视频教程吧。



修改页面内容

请进入后台的all pages页面,如下图所示的情况,带有elementor标记的,都可以用elementor编辑页面,也就是能够可视化编辑页面内容。

astra tutorial 2020 09 19 18 55 04 - 工业机械 | B2B外贸模板网站安装包

用Elementor编辑页面的方法:点选要修改的内容,然后在左侧工具栏中设置内容、样式以及高级配置。我们依旧用一个视频来讲解页面内容编辑功能,视频中的模板与本文中的模板不一样,但方法是一样的。



你还可以看下方的Elementor编辑器的教程,了解更多细致的操作。

查看更多Elementor教程,其中有部分教程是针对Elementor Pro的,若是在使用免费版的Elementor时提示你升级Pro或未显示视频中的操作的功能,就表示是Elementor Pro的功能,需要付费购买。

编辑页脚

Astra的这套模板的页脚是用插件Elementor - Header, Footer & Blocks制作的,页头是用的Astra本身自带的功能。页脚的编辑方法与页面编辑方法无差异,详见下方视频。



给网站添加返回顶部按钮

在免费版的Astra里是不提供页面上的返回顶部按钮的,如果你购买了付费版,安装Astra Pro插件后,进入appearance》astra options界面,点击图中的activate all按钮激活所有高级模块就能启用返回顶部按钮了。

image 48 - 工业机械 | B2B外贸模板网站安装包

如果决定只用免费版Astra,那有如下两种方法:

给网站添加侧边悬浮联系按钮(付费)

这是我自制的付费模板,能够在全站右侧添加悬浮的4个联系按钮(按钮你可以自行增减),详细介绍请查看:网站右侧边悬浮联系按钮

image 3 - 工业机械 | B2B外贸模板网站安装包

Astra主题设置常见功能介绍

在上文中我们已经介绍过主题设置的一部分功能,譬如侧边栏、面包屑。接下来我们讲解一些常用的Astra主题设置功能。

如何修改网站颜色?譬如正文颜色、按钮颜色

在appearance》astra option页面,点击set colors进入

astra theme tutorial 2020 10 02 18 38 49 - 工业机械 | B2B外贸模板网站安装包

进入页面后,点选base colors菜单进入配置页面。

astra theme tutorial 2020 10 02 18 40 23 - 工业机械 | B2B外贸模板网站安装包

在base colors页面,可以设置如下颜色:

astra theme tutorial

  • text color:文本颜色,作用于网站的正文内容
  • theme color:主题颜色,一般影响网站按钮、选定文本时的背景颜色等等,如果按钮有单独设置配色,则不会受主题颜色影响
  • link color:链接颜色,通常作用于页面中的文字链接,产品评价五星图标、产品标签页切换、产品分类与标签链接,对按钮无影响,按钮有单独的设置
  • link hover color:鼠标悬停链接时的颜色
  • heading color(h1-h6):标题颜色
  • background color:网站背景颜色,可以响应式设置
  • background image:网站背景图片,颜色会叠加图片之上,如果同时选择了颜色和图片,那么请将颜色设置一些透明效果,针对图片,点击more settings还可以设置图片的布局、重复、尺寸、位置。

如何设置文本的排版,譬如字体、字号、行距

使用Astra的全局文本排版设置,可以对全站的文本样式进行自定义。需要注意的是,如果你在Elementor中设置了某些元素的文本样式,那它将不会取用Astra主题中设置的文本样式。

功能入口:请点击菜单WordPress后台菜单:appearance》customize,进入后点击global》typography。在Astra免费版中,提供了如下图所示的两项配置:基础排版设置、标题设置。付费版Astra的配置功能更多一些。

astra theme tutorial

Base Typography 基础排版

基础排版设置可以影响到全站的文本默认样式,当文本没有设置自己的样式时,就会取用默认设置。通常文章、产品详情正文就使用这个默认样式。

astra theme tutorial 1 5 - 工业机械 | B2B外贸模板网站安装包

  • Family 字体,提供了系统字体、Google字体可供选择
  • Variants 变体,仅适用于google字体,设置变体类型可以便于你之后快速选择字体样式,这个功能不常用
  • Size 大小
  • Text Transform 文本转换,包含:无、全部大写、全部小写、首字母小写
  • Weight 文本粗细
  • Line Height 文本行高
  • Paragraph Margin Bottom 段落底部间距

当你在设置文本字体、字号、粗细等样式时,右侧界面中可及时预览页面效果,你还可以直接在页面点选需要预览的页面。

譬如下图所示,我框选了两处正文文本,也可以理解为基础文本,他们会取用此处的基础排版样式。而另外两处较大较粗的字体,是标题文本,标题文本通常比较突出,通常用在页面标题以及页面主要栏目标题。

astra theme tutorial 2020 10 02 18 49 52 - 工业机械 | B2B外贸模板网站安装包

Heading 标题排版

上文中提到的标题文本(heading),在WordPress中分为6种——H1-H6,数值越大,标题层级越深,H1通常是页面的大标题。

astra theme tutorial

  • 针对H1-H6标题,可通配字体、变体、字体粗细、字体大小写、行高
  • 针对H1-H3标题,可分别设置:字体、字号(可区分电脑、平板、手机设置,即响应式)、粗细、大小写、行高;若是未设置,则会默认继承通配设置与全局设置
  • 针对H4-H6,可区分电脑/平板/手机设置不同字号,若是未设置,则会默认继承通配设置与全局设置

Astra主题如何设置页面内容布局

功能入口:请点击菜单WordPress后台菜单:appearance》customize,进入后点击global》container。

  • width 宽度,可以设置网页正文区的宽度,通常保持默认1200px。
  • layout 布局,可以设置网页的布局,布局分为四种类型(下文有图解):
    • boxed:网页内容和侧边栏都在白盒子中,白盒子周围是背景色
    • content boxed:只有内容在白盒子中
    • full width / contained:页面全宽,背景被覆盖,但内容和侧边栏依旧在盒子中
    • full width / stretched :页面和正文全部被拉伸铺满,背景被覆盖

astra zhuti jiaocheng
astra 主题boxed布局

astra zhuti jiaocheng
astra 主题 content boxed布局

astra zhuti jiaocheng
astra 主题 full width / contained布局

astra zhuti jiaocheng
astra 主题 full width / stretched布局

astra theme tutorial

布局可以针对页面、博客详情页、归档列表页、产品页面分别设置

Astra主题如何设置按钮样式

功能入口:请点击菜单WordPress后台菜单:appearance》customize,进入后点击global》button。此处可以设置按钮的:

  • color 颜色(常规背景色、常规文字颜色;悬停背景色、悬停文字颜色),
  • border 边框颜色、粗细、半径;
  • button text 按钮上的文字的排版(大小、行高、粗细等);
  • padding 按钮内间距:即文字与边框的距离。

astra theme tutorial

Astra主题如何修改页头的样式

功能入口:请点击菜单WordPress后台菜单:appearance》customize,进入后点击Header》Primary Header。

如下图所示,我将页头布局改为了上logo+下菜单布局,一共有三种布局,请按需调整。同时,还可以调整页头的宽度(width),它提供了content width(与内容宽度保持一致)和full width(全宽)选项。也能给页头添加底部边框,设置粗细(bottom border size)以及颜色(bottom border color)。

astra theme tutorial 2020 10 02 19 06 24 - 工业机械 | B2B外贸模板网站安装包

此处的设置依旧是左侧修改后,右侧即时预览,你可以逐一调整测试,不点击右上角的Publish按钮都不会生效。你也可以点击publish按钮旁边的齿轮,它还提供保存草稿和定时发布的功能。

astra theme tutorial 2020 10 02 19 10 43 - 工业机械 | B2B外贸模板网站安装包

在左侧页面底部,还有设备图标按钮,点击不同的图标,在右侧可以预览不同设备上的网页效果。

astra theme tutorial 2020 10 02 19 12 42 - 工业机械 | B2B外贸模板网站安装包

如何给导航中添加按钮

在导入模板后,我们能看到导航的右侧有一个购物图标,你也可以将它更换为搜索图标或按钮。

功能入口:请点击菜单WordPress后台菜单:appearance》customize,进入后点击Header》Primary Menu。如下图所示,可以在last item in menu中设置。

astra theme tutorial 2020 10 02 19 18 38 - 工业机械 | B2B外贸模板网站安装包

在last item in menu下方,还有两个选项,你需要点击左下角切换到平板或手机模式,然后试用它们,用于控制这个元素的显示状态与显示位置。譬如下图,我便将搜索按钮收在了菜单内。

astra theme tutorial 2020 10 02 19 23 05 - 工业机械 | B2B外贸模板网站安装包

依旧在这个配置页面,你还能找到子菜单样式设置、移动端菜单按钮的样式设置。

网站内容发布要点

至此,页面修改就差不多告一段落了,接下来就是往网站上发产品、发博客,这些内容的发布有一些注意事项,我在另一篇基于Elementor Pro的建站教程中有详细的描述,请点击《B2B外贸建站教程》前往查看。

站内SEO

请按照如下教程逐步操作

  1. 给网站安装Google Analytics跟踪代码
  2. 给网站开通Google Search Console
  3. 将Google Analytics关联Google Search Console(GA4目前不能关联,就先不关联了)
  4. Rank Math SEO设置教程
  5. 你的网页如何在Rank Math SEO的测试中得到100分

站点速度优化

我们需要用工具Gtmetrix测试站点的速度,并进行速度优化,尽量优化到加载时间在3S以内,优化教程请按如下子教程逐一实施

  1. 优化图片,在上文中已经介绍了图片的优化办法,此教程中做了一些补充扩展
  2. 针对使用Siteground建站的情况,可以使用SG Optimizer加速网站,我实测后,发现效果不理想(优化前后差距很小),我觉着最好用易用的还是付费使用WP Rocket加速网站
  3. 删除谷歌字体(2种简单方法)
  4. 使用Flying Pages预加载网页
  5. 实施CDN,每个主机的CDN不尽相同,大多用的是免费的Cloudflare。
    1. 如果在Siteground建站,请看:在Siteground给网站启用Cloudflare CDN
    2. 如果使用Cloudways主机,请开通cloudflare cdn

开放收录,站点上线

完成上述内容后,站点可上线,开放收录吧、

进入设置》阅读(setting》reading),将建议搜索引擎不索引本站点去掉勾选,保存更改

wordpress%E5%BC%80%E6%94%BE%E6%94%B6%E5%BD%95 - 工业机械 | B2B外贸模板网站安装包

然后进入Google Search Console,提交站点地图地址以助于加快收录。

google-search-console中提交站点地图

站点地图地址可在Rank Math SEO中获取

image 89 - 工业机械 | B2B外贸模板网站安装包

最后,如果你有难以解决的疑问,也可以留言或加我微信咨询,若是教程中未包含的知识,我会根据读者的反馈不断补充~

常见问题答疑

根据读者的咨询,我将一些细节问题及答案补充如下

如何隐藏产品列表页的排序功能

通过添加自定义css.woocommerce-ordering{display:none}

image 58 - 工业机械 | B2B外贸模板网站安装包

1.进入appearance 》 customize页面

astra tutorial

2.点击底部的additional css

astra tutorial

3.添加如下代码后,点击右上角的publish按钮即可。

.woocommerce-ordering{display:none}

如何在首页展示我想要的产品

使用Elementor编辑首页,将产品模块替换成新的元素Product Grid(EA)

之前我们安装的Essential Addons for Elementor插件中,提供了Product Grid(EA)元素,使用它替换首页中已有的产品元素。

image 31 - 工业机械 | B2B外贸模板网站安装包

在Product Grid中,如下图所示,在Product setting中,按你的需要调整Filter By,以及Order(排序)规则、并且可以指定产品所属的目录(product categories)

image 32 - 工业机械 | B2B外贸模板网站安装包

其中,作为B2B站点,只有Rencent Products和Featured Products我们能用上。Rencent Products表示最新产品,Featured Products表示星标产品,在后台产品管理页面,将产品的星星点一下变实心就表示星标了。

image 33 - 工业机械 | B2B外贸模板网站安装包

备注:Best selling products表示热卖产品;sale products表示促销产品;top rated products表示最高评价产品;对于B2B站而言,不涉及销售,也就用不上这三个选项了。

如何制作首页的轮播广告(banner)

免费的Elementor不提供Slider功能,请安装插件Premium Addons for Elementor,它是Elementor的元素扩展插件,使用它的carousel widget可以实现轮播广告功能。

安装并激活插件Premium Addons for Elementor之后,请先创建banner的内容,如下图所示,在templates中add new,模板类型一般选择setion。

image 48 - 工业机械 | B2B外贸模板网站安装包

进入页面后,你将能看到Premium Addons for Elementor提供的模板入口(五角星),点击它你可以查看一些现成的模板,免费的可以直接导入,标记pro的需要付费。

image 49 - 工业机械 | B2B外贸模板网站安装包

如下图所示,我导入了一个banner

image 50 - 工业机械 | B2B外贸模板网站安装包

插入完成后,你可以按需修改内容素材,完成后点击左下角的publish按钮发布。

image 51 - 工业机械 | B2B外贸模板网站安装包

接下来用相同的办法创建第二个banner,你也可以不导入模板,自制一个banner,譬如最简单的是直接用image图片元素

image 52 - 工业机械 | B2B外贸模板网站安装包

记得将图片尺寸设置为full,将link 设置为custom url,然后输入图片需要链接的页面。

image 53 - 工业机械 | B2B外贸模板网站安装包

接下来用Elementor编辑需要添加banner 的页面,总左侧元素库找到premium carousel,将它拖拽到右侧页面中

image 54 - 工业机械 | B2B外贸模板网站安装包

然后按下图所示,选择template为刚才制作的两个banner。

image 55 - 工业机械 | B2B外贸模板网站安装包

上图中我们能看到banner两侧有空白,我们如下图所示,选择banner所在的setion,然后在左侧的style中,将content width从box设置为full,这下banner两侧就没有空白了,但是四周还有细小的间隙,请继续往下看。

image 56 - 工业机械 | B2B外贸模板网站安装包

如下图所示操作,点选banner所在的column,然后在advanced标签页中,找到padding并设置为0,可以去掉banner周围的白色缝隙。

image 57 - 工业机械 | B2B外贸模板网站安装包

插件要设置成自动更新吗?

不建议设置为自动更新,因为插件更新还是可能会出错的,建议两周手动更新一次,更新前记得备份网站,如果更新出错,还可以用备份进行还原。

为什么产品首页不能用Elementor编辑

当你用Elementor编辑SHOP或products页面时,出现下方图一的错误,那是因为这个页面在Woocommerce的设置中被选为商店页面(见下方图二),并且在页面管理中,也能看到它被标记为商店页面(见下方图三),此时,便不能用Elementor编辑,它是自动调用主题的模板的,如果你非要用Elementor编辑它,请先在Woocommerce的设置中,取消该页面作为商店页面。

image 88 - 工业机械 | B2B外贸模板网站安装包
图一

image 86 - 工业机械 | B2B外贸模板网站安装包
图二

image 87 - 工业机械 | B2B外贸模板网站安装包
图三

为什么我修改了页面标题,但在菜单中还是修改前的?

这很可能是因为:这个页面在菜单中的标题被修改了,请前往appearance>menu中查看和修改,如果你想将菜单的页面标题与页面本身标题保持一致,请重新添加这个菜单项,不要人工添加自定义链接,直接选择页面并点击添加到菜单按钮。切记:如果你在菜单中修改了页面的标题,那么它将不会同步你在页面管理中设置的标题。
推荐阅读:如何在WordPress中制作导航菜单

为什么我的产品首页没有展示产品呢?

大概率是的产品首页未被设置为商店页面。请在woocommerce的设置》常规中,按下图所示方式配置。

此图像的alt属性为空;文件名为image-86.png

菜单里的购物车图标没对齐,怎么办?

原因是在设置菜单最后一项图标时,选中了Take Last Item Outside Menu,如下图所示,去掉勾选即可恢复。

image 48 - 工业机械 | B2B外贸模板网站安装包

Elementor、Divi、Beaver Builder、Visual Composer、WPBakery、Brizy...我深度用过Elementor、WPBakery,为了试试能否撼动Elementor的地位,我体验了Divi、Brizy,翻阅各种国外的对比文,然后拿Ahrefs给他们做了流量数据分析,最终,王者依旧是我的心头好:Elementor

本文不细说功能,他们都是拖拽式积木式做网页的好手,我们直接看每个产品官网的流量数据,数据来自Ahrefs。

wordpress page builder ahrefs data - 工业机械 | B2B外贸模板网站安装包

如上图所示,排名第一的是Divi,咦?为嘛不是Elementor呢?因为Divi不止有页面编辑器,还有配套的主题,含有丰富的模板,而Elementor的主题是个空白主题Hello Elementor。

于是,我将divi的页面编辑器的地址也加入了分析,也就是下表中的第三名。Elementor编辑器可不就是第一了嘛~

图中的Traffic表示网站的自然流量,Elementor和Divi遥遥领先,其他4个加起来的流量还不及Elementor一个。即便如此,我还是很好奇Divi与Elementor的区别在哪里。

Elementor VS Divi

价格

Divi不提供免费版,起步价89美元/年,无限站点可用,支持一次性付费购买终身,249美元/年/不限站点;

image 22 - 工业机械 | B2B外贸模板网站安装包

Elementor提供免费版,付费版起步是49美元/年/1个站点。Elementor不支持终身购买,提供的是199美元/年/1000站点。

image 21 - 工业机械 | B2B外贸模板网站安装包

所以,从付费+长期的性价比考虑,Divi占优势,因为插件得保持更新,以避免安全漏洞侵扰。而从免费角度而言,Elementor更佳,你可以用Elementor+Astra+Elementor的扩展元素做一个免费的外贸网站,对预算有限的人而言是非常友善的。

主题

Divi不仅含插件,还包含主题,Divi主题会提供常规主题的配置功能;

而Elementor的主题Hello Elementor...emm,就是个空白的空壳啊(我还蛮喜欢这种方式的,哈哈哈,因为直接用Elementor Pro就能配置各种设置啊,对主题要求的功能很低很低了。

我之前用过很久的Astra正版,用着用着就觉得,咦,干啥一定要用付费的Astra,大部分选项配置都能在Elementor的theme style里搞定啊,于是又省下一笔银子呢~

当然某些时候会轻微费事,譬如返回顶部按钮要自制哦~而Astra主题里按个开关就能开启了返回顶部,建议新手不要学我~因为Astra是很棒棒哒

支持Elementor编辑器的主题很多,我在Themeforest中搜到1600+个,很多大牌主题都在支持Elementor,而且还在不断增多,但支持Divi编辑器的主题没有找到┑( ̄Д  ̄)┍,看看,Elementor做成开放生态圈的优势就体现出来了,大家一起好~推荐搭配使用支持Elementor的轻量主题哦~

模板

Elementor自带的模板库要少于Divi,但是,架不住Elementor的第三方扩展多啊,譬如Envato专门开发了Envato Elements,里头全是Elementor的网站成套模板、模块,免费、付费的都有,一个月十几美金随便下载!

然后在我买了付费divi后,发现还有一些延伸收费,譬如我在制作页头模版时,发现divi自带的模板包里未提供,然后官网找到了额外付费39美金的模版包,额...这在Elementor可都是免费模板的。

功能

emm, 这个好像没啥特别好说的,大家都差不多,硬要说的话:目前而言,Elementor提供了popup(弹出层)功能,而Divi没有,但Divi有A/B test功能。

交互体验

我购买并体验了一下divi,我个人觉得Elementor更易用一些,功能的辨识度、操作之间的串联也更舒适,举个简单的例子,divi的元素配置项大部分都折叠了,需要我一个个点开查看(这等于是增加我鼠标手的负担啊(╯‵□′)╯︵┻━┻),而Elementor的元素的常用配置是展开的~(这是因人而异的使用习惯导致的)。

Divi也有自己便利的功能,譬如同类的设置可以快速扩展,不用挨个复制黏贴样式,只用点一个扩展按钮即可覆盖到全页面。

综上,推荐使用Elementor,如果你要购买Elementor,一定要看看这篇省钱又避坑的Elementor购买教程哦~,同时推荐Elementor系列教程

如果你要自学外贸网站建设,那么请查看教程:Astra主题教程:免费建外贸网站(入门级)或2020年B2B外贸建站的终极教程 (进阶级)。

如果你想快速完成外贸建站,可以查看本站提供的高性价比的外贸网站模板建站服务

拥有Elementor Pro让建站就跟拼图一样方便了,那如何省钱的购买Elementor Pro呢?如何避开坑呢?下面分享自己的实践经验。

避坑:不要用Elementor Pro破解版

我曾经用过别人给的Elementor Pro破解版,破解版不用在线激活,且版本比较老,而正版Elementor Pro是必须在线联接Elementor官方激活的,结果破解版里头植入了出站链接(黑链),等于我们做好的网站默默的都提供了隐形链接到其他网站,并且是每个页面都植入了明面上看不到的链接,哗哗的向别人传递你的站点的权重,给别人的谷歌排名做嫁衣。

高性价比购买Elementor Pro

再说方法之前,我们了解一下Elementor Pro的计费方式:按站点按年交费,譬如1个站点1年49美元;3个站点1年99美元;1000个站点1年199美元;且提供30天内无理由退款;更多价格明细可查看官方介绍

image 21 - 工业机械 | B2B外贸模板网站安装包

方法1、如果你只做1个网站,且不会换域名,可以从本站购买,49元/站点/年,我买了官方顶配版本,需要你提供网站后台账号密码给我在线激活,激活后不可退货,但在有效期内,如果你的网站重装需要在原站重新激活,我们提供多次激活服务。

方法2、如果你有多个网站,但不会同时进入设计,你可以继续按照1的方法购买多份;还可以购买官方的1个站点1年49美元版本,当1个网站使用完成后,在Elementor账户里取消激活,然后在其他网站激活使用,等于1个授权在不同网站之间轮换使用。点击此处前往Elementor官网
操作方法详见:Elementor Pro的许可证密钥可以更换绑定的域名吗?

这个方法我之前一直在用,之所以能行得通,是因为授权即便被取消,针对已经做好的网页,内容设计都不会受到影响,但涉及Elementor Pro的功能都无法使用。譬如:Elementor Pro的元素块无法拖拽到页面上;已有Pro元素块的dynamic动态调用功能不能用,无法使用导入模板库功能。如果想了解更多详情,可以查看官方这篇文档

方法3、上面的方法不适合同时设计多个网站的情况,譬如你是建站服务商,那就根据同时在设计的站点的数量,买相应的多站点版本Elementor Pro,一般来说都是买199美元的1000站点版本。

方法4、国内购买永久离线更新的去授权版本,唯一的问题是不能在线直接更新,需要手工上传新的插件包更新,好处是无限站点可用。

最后,说明一下Elmentor Pro续费的问题:

  • 如果次年不续费,那次年就无法更新插件,不更新插件面临的是:可能存在的漏洞风险、无法使用新功能。
  • 但只要你的网站还是激活Elementor Pro的,已有功能都还能正常使用。

如果买完了插件不会安装,看这篇安装插件教程

推荐阅读:

9个最适合Elementor的免费主题【官方推荐】

LOYSEO使用的主题不提供网站的返回顶部按钮,而免费的Elementor页面编辑器就能解决这个问题,只需要3分钟,跟着教程试一下吧。

前提说明:

如果不方便看视频的,可以看下方的图文教程。(我还是推荐看视频啊,更容易理解,无配音有字幕)

经后期检查校对发现,视频教程中遗漏了:设置按钮所在setion的margin top为-1,具体可看下方图文教程。
此外,渐变动画功能只能在付费的Elementor Pro中使用,如果用的免费版Elementor,也可以不设置这个动画。

如何用Elementor制作返回顶部按钮

所需时间: 3 minutes插件费用: 0 元

所需插件:

Elementor插件 - 免费Elementor - Header, Footer & Blocks插件 -免费

操作步骤

第1步:在页面顶部模板中,将最顶部的setion添加css id “top”在网站header中,找到第一个setion,将它的advanced的css id设置为 topelementor back to top tutorial 2 - 如何用Elementor制作Wordpress网站的返回顶部按钮(3分钟解决)第2步:在页面底部添加一个setion