Bước 1: Lấy widget key Photta của bạn
Đăng nhập vào Dashboard Photta Business tại business.photta.app. Đi tới Settings → API Keys và sao chép mã publishable key của bạn (bắt đầu bằng pk_live_). Đây là thông tin xác thực duy nhất bạn cần. Trước khi mã key hoạt động, hãy thêm tên miền cửa hàng WooCommerce của bạn (ví dụ: mystore.com) vào Settings → Allowed Domains. Việc kiểm tra tên miền diễn ra trên mỗi yêu cầu thử đồ, vì vậy danh sách cho phép phải được thiết lập trước khi bạn chạy chính thức.
Nếu bạn đang thử nghiệm cục bộ trên một subdomain như localhost hoặc URL staging, hãy thêm tên miền đó vào danh sách cho phép riêng biệt. Bạn có thể thêm tối đa 10 tên miền trên bất kỳ gói trả phí nào. Tài khoản dùng thử cho phép một tên miền. Khi tên miền của bạn đã được liệt kê, các yêu cầu từ nguồn đó sẽ được chấp nhận ngay lập tức — không có độ trễ lan truyền.
Bước 2: Chọn shortcode hoặc thẻ script
WooCommerce cung cấp cho bạn hai lộ trình tích hợp gọn gàng. Phương pháp shortcode ([photta_widget pk="pk_live_..."]) cho phép bạn dán widget vào một vị trí cụ thể trong mẫu trang sản phẩm hoặc một hook WooCommerce tùy chỉnh — lý tưởng nếu bạn muốn nút xuất hiện chính xác giữa thư viện ảnh sản phẩm và nút Thêm vào giỏ hàng. Để sử dụng shortcode, hãy dán trực tiếp vào tệp mẫu sản phẩm WooCommerce single-product/add-to-cart/simple.php, hoặc sử dụng một khối page builder.
Phương pháp thẻ script chèn SDK trên toàn hệ thống thông qua tệp functions.php của theme bằng cách sử dụng wp_enqueue_script. Thêm đoạn mã sau vào functions.php của child theme: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Điều này sẽ tự động hiển thị nút widget trên mọi trang sản phẩm mà không cần thay đổi từng mẫu. Hầu hết các chủ cửa hàng ưu tiên phương pháp thẻ script vì sự đơn giản của nó.
Bước 3: Dán và lưu đoạn mã bạn đã chọn
Đối với lộ trình shortcode: mở tệp ghi đè mẫu WooCommerce cho trang sản phẩm đơn lẻ trong child theme của bạn. Dán [photta_widget pk="pk_live_..."] tại đúng vị trí theo chiều dọc mà bạn muốn nút xuất hiện. Lưu tệp. Trình kết xuất shortcode được đăng ký bởi trình hỗ trợ gọn nhẹ của Photta — không cần tệp plugin, vì chính SDK sẽ đăng ký trình xử lý shortcode khi được tải.
Đối với lộ trình thẻ script: mở Appearance → Theme File Editor trong quản trị WordPress của bạn, tìm đến tệp functions.php của child theme và thêm đoạn mã wp_footer như đã hiển thị ở Bước 2. Nhấp vào Update File để lưu. Xác minh đoạn mã đã được lưu bằng cách tải lại trình chỉnh sửa và xác nhận mã hiện diện. Nếu bạn sử dụng plugin tạo bộ nhớ đệm (WP Rocket, W3 Total Cache), hãy xóa bộ nhớ đệm ngay bây giờ để script footer mới được thực thi.
Bước 4: Xác minh widget xuất hiện trên cửa hàng
Truy cập vào một trang sản phẩm trên cửa hàng WooCommerce của bạn bằng cửa sổ trình duyệt ẩn danh. Bạn sẽ thấy nút 'Thử đồ ngay' gần phần Thêm vào giỏ hàng. Nhấp vào nút, tải lên ảnh thử nghiệm và xác minh kết quả thử đồ hiển thị. Nếu nút không xuất hiện, hãy mở console trình duyệt (F12) và tìm các lỗi photta. Lỗi 403 domain có nghĩa là tên miền của bạn chưa có trong danh sách Allowed Domains.
Ngoài ra, hãy kiểm tra xem thẻ script SDK có xuất hiện trong mã nguồn HTML của trang hay không bằng cách nhấn Ctrl+U (Xem nguồn trang) và tìm kiếm từ khóa photta. Nếu thẻ này vắng mặt nhưng bạn đã thêm hook wp_footer, hãy kiểm tra kỹ xem theme của bạn có gọi hàm wp_footer() trong mẫu footer hay không — một số theme cũ hoặc tùy chỉnh quá nhiều thường bỏ qua lệnh gọi này. Thêm <?php wp_footer(); ?> trước thẻ đóng </body> trong tệp footer.php của bạn sẽ khắc phục được điều này.
Bước 5: Cấu hình hiển thị theo danh mục
Theo mặc định, nút widget xuất hiện trên tất cả các trang sản phẩm. Để giới hạn cho các danh mục cụ thể, hãy thêm thuộc tính data-categories vào thẻ script của bạn với danh sách các slug danh mục WooCommerce cách nhau bằng dấu phẩy: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. SDK sẽ tự động đọc dữ liệu danh mục WooCommerce của trang hiện tại và ẩn nút trên các trang không khớp.
Đối với người dùng shortcode, chỉ đặt shortcode trong các mẫu liên quan đến danh mục mục tiêu, hoặc bao bọc shortcode trong một điều kiện WooCommerce: sử dụng hàm PHP has_term() để kiểm tra xem sản phẩm hiện tại có thuộc danh mục mục tiêu hay không trước khi xuất shortcode. Cách làm này giúp bạn kiểm soát chính xác loại sản phẩm nào hiển thị tùy chọn thử đồ mà không cần nhân bản các mẫu.