WooCommerce
WordPress用の無料ECプラグイン。WordPressの柔軟性とeコマース機能を組み合わせ。
CMS
WooCommerce
概要
WooCommerceは、WordPress用の無料ECプラグインです。WordPressの柔軟性とeコマース機能を組み合わせ、中小企業向けに人気のECソリューションです。
詳細
WooCommerce(ウーコマース)は、2011年にリリースされたWordPress用のオープンソースECプラグインです。GPL v3ライセンスで提供され、500万以上のサイトで利用されています。WordPressサイトの28%がWooCommerceを使用しており、市場シェアは22%に達しています。PHPで開発され、WordPressのプラグインシステムとテーマ機能を最大限に活用できます。コアプラグインは無料で、豊富な拡張機能により機能を追加できます。決済ゲートウェイ、配送方法、在庫管理、SEO最適化など、ECサイトに必要な機能を網羅しています。WordPressの強力なコンテンツ管理機能と組み合わせることで、ブログとECを統合したサイトを簡単に構築できます。最新のHPOS(High-Performance Order Storage)システムにより、大規模サイトでも高いパフォーマンスを実現します。
メリット・デメリット
メリット
- 完全無料: コアプラグインは無料で利用可能
- 高いカスタマイズ性: PHPコードを自由に編集・拡張可能
- WordPressとの親和性: 既存のWordPressサイトに簡単に追加
- 大きなコミュニティ: 活発なフォーラムと豊富なドキュメント
- SEO対応: WordPressの優れたSEO機能を活用
- 豊富なテーマ: 数千のWooCommerce対応テーマが利用可能
- 拡張性: フックとフィルターによる柔軟な機能拡張
デメリット
- 技術的知識が必要: セットアップとカスタマイズにPHP知識が必要
- セキュリティ管理: 自己責任でセキュリティ対策が必要
- パフォーマンス最適化: 大規模サイトでは最適化が必須
- サポート制限: 無料版では公式サポートなし
- ホスティング費用: 自前でサーバーを用意する必要あり
主要リンク
- WooCommerce公式サイト
- WooCommerce Documentation
- WooCommerce GitHub リポジトリ
- WooCommerce REST API
- WooCommerce Extensions
- WooCommerce Community
使い方の例
WooCommerceの基本セットアップ
// functions.php - WooCommerceサポートの有効化
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
function mytheme_add_woocommerce_support() {
// WooCommerceサポートを宣言
add_theme_support( 'woocommerce' );
// 商品ギャラリー機能を有効化
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
// カスタム商品タブの追加
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
// カスタムタブを追加
$tabs['custom_tab'] = array(
'title' => __( '仕様詳細', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_custom_tab_content'
);
return $tabs;
}
function woo_custom_tab_content() {
// タブの内容を表示
echo '<h2>製品仕様</h2>';
echo '<p>ここに製品の詳細仕様を記載します。</p>';
}
カスタム商品フィールドの追加
// 商品編集画面にカスタムフィールドを追加
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_fields' );
function woo_add_custom_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// テキストフィールド
woocommerce_wp_text_input(
array(
'id' => '_custom_product_code',
'label' => __( '商品コード', 'woocommerce' ),
'placeholder' => 'ABC-123',
'desc_tip' => 'true',
'description' => __( '独自の商品コードを入力してください。', 'woocommerce' )
)
);
// セレクトボックス
woocommerce_wp_select(
array(
'id' => '_product_condition',
'label' => __( '商品状態', 'woocommerce' ),
'options' => array(
'new' => __( '新品', 'woocommerce' ),
'used' => __( '中古', 'woocommerce' ),
'refurbished' => __( 'リファービッシュ品', 'woocommerce' ),
)
)
);
echo '</div>';
}
// カスタムフィールドの保存
add_action( 'woocommerce_process_product_meta', 'woo_save_custom_fields' );
function woo_save_custom_fields( $post_id ) {
// 商品コードの保存
$custom_product_code = $_POST['_custom_product_code'];
if( !empty( $custom_product_code ) ) {
update_post_meta( $post_id, '_custom_product_code', esc_attr( $custom_product_code ) );
}
// 商品状態の保存
$product_condition = $_POST['_product_condition'];
if( !empty( $product_condition ) ) {
update_post_meta( $post_id, '_product_condition', esc_attr( $product_condition ) );
}
}
WooCommerce REST APIの使用
// REST APIエンドポイントのカスタマイズ
add_action( 'rest_api_init', function () {
// カスタムエンドポイントの登録
register_rest_route( 'wc-custom/v1', '/products/bestsellers', array(
'methods' => 'GET',
'callback' => 'get_bestselling_products',
'permission_callback' => '__return_true',
) );
} );
function get_bestselling_products( $request ) {
$args = array(
'post_type' => 'product',
'meta_key' => 'total_sales',
'orderby' => 'meta_value_num',
'posts_per_page' => 10,
'order' => 'DESC',
);
$products = new WP_Query( $args );
$data = array();
if ( $products->have_posts() ) {
while ( $products->have_posts() ) {
$products->the_post();
$product = wc_get_product( get_the_ID() );
$data[] = array(
'id' => $product->get_id(),
'name' => $product->get_name(),
'price' => $product->get_price(),
'sales' => $product->get_total_sales(),
'image' => wp_get_attachment_url( $product->get_image_id() ),
'permalink' => $product->get_permalink(),
);
}
}
wp_reset_postdata();
return new WP_REST_Response( $data, 200 );
}
カート機能のカスタマイズ
// カート自動更新の実装
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if ( is_cart() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// 数量変更時の自動更新
$('.woocommerce').on('change', 'input.qty', function() {
var $button = $(this).closest('form').find('[name="update_cart"]');
$button.prop('disabled', false);
$button.trigger('click');
});
});
</script>
<?php
}
}
// カスタム配送方法の追加
add_action( 'woocommerce_shipping_init', 'custom_shipping_method_init' );
function custom_shipping_method_init() {
class WC_Custom_Shipping_Method extends WC_Shipping_Method {
public function __construct() {
$this->id = 'custom_shipping';
$this->method_title = __( 'カスタム配送', 'woocommerce' );
$this->method_description = __( 'カスタム配送方法の説明', 'woocommerce' );
$this->init();
}
function init() {
// 設定フォームの初期化
$this->init_form_fields();
$this->init_settings();
// 設定の保存
add_action( 'woocommerce_update_options_shipping_' . $this->id, array( $this, 'process_admin_options' ) );
}
public function calculate_shipping( $package = array() ) {
// 配送料の計算ロジック
$cost = 0;
$weight = 0;
foreach ( $package['contents'] as $item_id => $values ) {
$_product = $values['data'];
$weight += $_product->get_weight() * $values['quantity'];
}
// 重量に基づく配送料
if ( $weight <= 1 ) {
$cost = 500;
} elseif ( $weight <= 5 ) {
$cost = 800;
} else {
$cost = 1200;
}
$rate = array(
'id' => $this->id,
'label' => $this->title,
'cost' => $cost,
);
$this->add_rate( $rate );
}
}
}
add_filter( 'woocommerce_shipping_methods', 'add_custom_shipping_method' );
function add_custom_shipping_method( $methods ) {
$methods['custom_shipping'] = 'WC_Custom_Shipping_Method';
return $methods;
}
注文処理のカスタマイズ
// 注文完了時のカスタムアクション
add_action( 'woocommerce_thankyou', 'custom_order_complete_action', 10, 1 );
function custom_order_complete_action( $order_id ) {
if ( ! $order_id ) return;
$order = wc_get_order( $order_id );
// 在庫管理システムへの通知
$order_data = array(
'order_id' => $order->get_id(),
'order_total' => $order->get_total(),
'customer_id' => $order->get_customer_id(),
'items' => array(),
);
foreach ( $order->get_items() as $item_id => $item ) {
$product = $item->get_product();
$order_data['items'][] = array(
'product_id' => $product->get_id(),
'product_name' => $product->get_name(),
'quantity' => $item->get_quantity(),
'price' => $item->get_total(),
);
}
// 外部APIへの送信(例)
wp_remote_post( 'https://api.example.com/orders', array(
'body' => json_encode( $order_data ),
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => 'Bearer YOUR_API_KEY',
),
) );
// カスタムメール送信
$to = $order->get_billing_email();
$subject = '【' . get_bloginfo( 'name' ) . '】ご注文ありがとうございます';
$message = 'ご注文番号: #' . $order_id . "\n";
$message .= 'ご注文の詳細はマイページからご確認いただけます。';
wp_mail( $to, $subject, $message );
}
フックとフィルターの活用
// 商品価格表示のカスタマイズ
add_filter( 'woocommerce_get_price_html', 'custom_price_html', 100, 2 );
function custom_price_html( $price, $product ) {
if ( $product->is_on_sale() ) {
$price = '<span class="sale-badge">SALE!</span> ' . $price;
}
// 会員価格の表示
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
if ( in_array( 'premium_member', $user->roles ) ) {
$member_price = $product->get_price() * 0.9; // 10%割引
$price .= '<br><span class="member-price">会員価格: ' . wc_price( $member_price ) . '</span>';
}
}
return $price;
}
// チェックアウトフィールドのカスタマイズ
add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' );
function custom_checkout_fields( $fields ) {
// 配送希望日時フィールドの追加
$fields['order']['delivery_date'] = array(
'type' => 'date',
'label' => __('配送希望日', 'woocommerce'),
'placeholder' => __('配送希望日を選択', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
);
$fields['order']['delivery_time'] = array(
'type' => 'select',
'label' => __('配送希望時間帯', 'woocommerce'),
'options' => array(
'' => __('指定なし', 'woocommerce'),
'morning' => __('午前中', 'woocommerce'),
'12-14' => __('12:00-14:00', 'woocommerce'),
'14-16' => __('14:00-16:00', 'woocommerce'),
'16-18' => __('16:00-18:00', 'woocommerce'),
'18-20' => __('18:00-20:00', 'woocommerce'),
'19-21' => __('19:00-21:00', 'woocommerce'),
),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
);
return $fields;
}
// チェックアウトフィールドの保存
add_action( 'woocommerce_checkout_create_order', 'save_custom_checkout_fields', 10, 2 );
function save_custom_checkout_fields( $order, $data ) {
if ( ! empty( $_POST['delivery_date'] ) ) {
$order->update_meta_data( '_delivery_date', sanitize_text_field( $_POST['delivery_date'] ) );
}
if ( ! empty( $_POST['delivery_time'] ) ) {
$order->update_meta_data( '_delivery_time', sanitize_text_field( $_POST['delivery_time'] ) );
}
}
これらの例は、WooCommerceの主要な開発パターンを示しています。WordPressとの統合、フックとフィルターによる機能拡張、REST APIの活用、カスタムフィールドの追加、配送方法のカスタマイズなど、幅広い開発シナリオに対応できます。