Code danh sách sản phẩm đã xem

Set Cookie khi user ghé thăm trang chi tiết sản phẩm

Chèn code bên dưới vào function.php của theme (ưu tiên child theme nếu có nhé).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function isures_set_user_visited_product_cookie()
{
if (!is_singular('product')) {
return;
}
global $post;
if (empty($_COOKIE['woocommerce_recently_viewed'])) {
$viewed_products = array();
} else {
$viewed_products = wp_parse_id_list((array) explode('|', wp_unslash($_COOKIE['woocommerce_recently_viewed'])));
}
$keys = array_flip($viewed_products);
if (isset($keys[$post->ID])) {
unset($viewed_products[$keys[$post->ID]]);
}
$viewed_products[] = $post->ID;
if (count($viewed_products) > 22) {
array_shift($viewed_products);
}
wc_setcookie('woocommerce_recently_viewed', implode('|', $viewed_products));
}
add_action('wp', 'isures_set_user_visited_product_cookie');
Với một ít code trên thì đã xử lý được phần cookie rồi. Tiếp tục là khởi tạo shortcode, đối với Flatsome thì em sẽ ưu tiên thêm 1 lựa chọn khác nữa là tạo thêm 1 element kéo thả vào header trong thời gian tới.

Khởi tạo shortcode sản phẩm đã xem

Code sau cũng bỏ vào function.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
add_shortcode('isures_recently_viewed_products', 'isures_2718_prod_viewed_atts');
function isures_2718_prod_viewed_atts()
{
ob_start();
$viewed_products = !empty($_COOKIE['woocommerce_recently_viewed']) ? (array) explode('|', wp_unslash($_COOKIE['woocommerce_recently_viewed'])) : array();
$viewed_products = array_reverse(array_filter(array_map('absint', $viewed_products)));
?>
<div id="isures-recently--wrap">
<div class="isures-container">
<?php
if (!empty($viewed_products)) {
echo do_shortcode('<div class="woocommerce columns-3 "><div class="products row row-small large-columns-3 medium-columns-3 small-columns-2">
<div class="product-small col has-hover product type-product post-25328 status-publish first instock product_cat-ghe-inox product_cat-ghe-inox-304 product_cat-ghe-inox-tron has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
                <a href="https://thietkeweb68.net/blog/san-pham/ghe-inox-chan-kieng/">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="25328" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Ghế inox        </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ghe-inox-chan-kieng/">Ghế Inox Chân Kiềng</a></p></div><div class="price-wrapper">
    <span class="price"><span class="regular-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>0.00</bdi></span></span> <span class="wholesale-price">Wholesale: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>55,000.00</bdi></span></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-25236 status-publish instock product_cat-ghe-inox product_cat-ghe-xep-inox has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="25236" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Ghế inox        </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ghe-xep-van-phong-chan-inox/">Ghế Xếp Văn Phòng Chân Inox</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>359,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-25141 status-publish last instock product_cat-ban-an-inox product_cat-ban-inox product_cat-ban-inox-chu-nhat product_cat-ban-inox-cong-nghiep has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="25141" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn Ăn Inox     </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ban-ghe-nha-an-cong-nghiep/">Bàn Ghế Nhà Ăn Công Nghiệp</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>2,980,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-18869 status-publish first instock product_cat-ban-an-inox product_cat-ban-inox product_cat-ban-inox-chu-nhat product_cat-ban-inox-cong-nghiep has-post-thumbnail featured purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
                <a href="https://thietkeweb68.net/blog/san-pham/ban-an-inox-hoa-phat/">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="18869" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn Ăn Inox     </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ban-an-inox-hoa-phat/">Bàn Ăn Inox Hòa Phát</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>2,350,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-25145 status-publish instock product_cat-ban-an-inox product_cat-ban-inox product_cat-ban-inox-chu-nhat product_cat-ban-inox-cong-nghiep has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
                <a href="https://thietkeweb68.net/blog/san-pham/ban-an-cong-nghiep/">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="25145" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn Ăn Inox     </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ban-an-cong-nghiep/">Bàn Ăn Công Nghiệp</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>1,980,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-18215 status-publish last instock product_cat-ghe-giam-doc product_cat-ghe-giam-doc-cao-cap has-post-thumbnail product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="18215" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Ghế giám đốc     </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ghe-giam-doc-cao-cap-tq18-398/">Ghế giám đốc cao cấp TQ18</a></p></div><div class="price-wrapper">
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-25147 status-publish first instock product_cat-ban-an-inox product_cat-ban-inox product_cat-ban-inox-chu-nhat product_cat-ban-inox-cong-nghiep has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="25147" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn Ăn Inox     </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ban-inox-cong-nghiep-chu-nhat/">Bàn Inox Công Nghiệp Chữ Nhật</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>1,980,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-18158 status-publish instock product_cat-ban-hop-son-pu has-post-thumbnail purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
                <a href="https://thietkeweb68.net/blog/san-pham/ct2412h5-120/">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="18158" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn họp sơn PU      </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ct2412h5-120/">CT2412H5</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>4,250,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-25135 status-publish last instock product_cat-ban-an-inox product_cat-ban-inox product_cat-ban-inox-chu-nhat product_cat-ban-inox-cong-nghiep has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
                <a href="https://thietkeweb68.net/blog/san-pham/ban-an-inox-cong-nghiep/">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="25135" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn Ăn Inox     </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ban-an-inox-cong-nghiep/">Bàn Ăn Inox Công Nghiệp</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>2,350,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
<div class="product-small col has-hover product type-product post-18161 status-publish first instock product_cat-ban-hop-son-pu has-post-thumbnail purchasable product-type-simple">
    <div class="col-inner">
    
<div class="badge-container absolute left top z-1">
</div>
    <div class="product-small box ">
        <div class="box-image">
            <div class="image-fade_in_back">
                <a href="https://thietkeweb68.net/blog/san-pham/ct3013h1-122/">
            </div>
            <div class="image-tools is-small top right show-on-hover">
                            </div>
            <div class="image-tools is-small hide-for-small bottom left show-on-hover">
                            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
                  <a class="quick-view quick-view-added" data-prod="18161" href="#quick-view">Quick View</a>            </div>
                    </div>
        <div class="box-text box-text-products">
            <div class="title-wrapper">     <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Bàn họp sơn PU      </p>
    <p class="name product-title woocommerce-loop-product__title"><a href="https://thietkeweb68.net/blog/san-pham/ct3013h1-122/">CT3013H1</a></p></div><div class="price-wrapper">
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>14,117,000.00</bdi></span></span>
</div>      </div>
    </div>
        </div>
</div>
</div><!-- row --></div>');
} else {
echo 'Không có sản phẩm xem gần đây';
}
?>
</div>
</div>
<?php
return ob_get_clean();
}

Ở trên mình tận dụng shortcode của woo để kéo ra cho nhanh

Columns ở dòng số 18 code trên:

  1. Limit=”8″ có nghĩa là hiển thị tối qua 8 sản phẩm. -> thay số tùy bạn.
  2. Columns=”6″ số cột là 6. -> thay tùy ý.

Hiển thị shortcode sản phẩm đã xem

Tiếp theo để hiển thị được sản phẩm đã xem thì bạn thêm shortcode sau vào nơi cần hiển thị, ví dụ như page!

1
[isures_recently_viewed_products] 

THIẾT KẾ WEB 68 – WEB68

EMAIL: info.thietkeweb68@gmail.com

SĐT: 0359373636 – 0902229139

WEBSITE: thietkeweb68.net

Trả lời

Email của bạn sẽ không được hiển thị công khai.