Revamp WooCommerce shop page 頁底加表格及文字

今次分享一個案例, 關於一個改造商品網站 - http://www.hysongreen.com 需要在新增主頁滑動片, 圖像設計, 修改資品目錄, [商店頁面, 商店目錄頁, 貨品頁面]都加設一個表格。

因為一般WooCommerce SHOP PAGE新增內容都只能加設在貨品圖集頁頂，如果需要加設在頁底，須要修改Theme Editor。

請大家記住所以工具, 名稱, PHP編碼 (大家亦可以在GOOGLE搜查, 其它方法)

• (PLUGIN) Wpforms

• WooCommerce Visual Hook Guide: Shop Page

• WooCommerce Visual Hook Guide: Single Product Page

revamp website

wpforms-CSS表格排版

wpforms-CSS位置

woo-1

woo-2

woo-3

woo-4

function-php

黃色位置, 是調控WooCommerce內的位置區域

綠色位置, 是加設文字, shortcode內的位置區域

/*** 加上文字 ***/

add_action( 'woocommerce_after_shop_loop', 'add_my_text', 20 ); function add_my_text() { print '<p>xxxx加上文字xxxx</p>'; }

/*** 插入表格(Shop Page) ***/

add_action( 'woocommerce_after_shop_loop', 'add_my_form', 20 ); function add_my_form() { echo do_shortcode('[wpforms id="XXXX"]');

}

/*** 插入表格(Product Page) ***/

add_action( 'woocommerce_after_single_product', 'add_my_form', 20 ); function add_my_form() { echo do_shortcode('[wpforms id="xxxx"]'); }

#溫馨提示:以上操作只用作參考用途，建議找合資格developer處理。

如更改錯誤，便有可能出現ERROR情況，便要除錯，請務必小心處理。

以下圖已注明指定區域編碼.

如大家有興趣了解關於SEO排位查詢，或網頁設計或改動現有網頁, 歡迎發郵給我們或登入以下網址 - 千帆網頁設計 https://www.kevinwebdesign.com / 查詢電話: 3481 2592 / WhatsApp: 61502871